Margin과 Padding 두가지 속성의 차이점은 위 사진 하나로 충분히 설명이 가능합니다.
Margin은 Object와 화면과의 여백(외부여백)을 말하며 Padding은 Object내의 내부여백을 의미합니다.
그럼 아래 예제를 보면 완벽히 이해할 수 있으실겁니다.
<%@ page language="java" contentType="text/html; charset=EUC-KR"
pageEncoding="EUC-KR"%>
<!DOCTYPE>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<style>
body {
margin:0;
}
div {
width:100px; height:100px;
font-weight:bold;
}
#box1 {
background-color:green;
margin-left:10px;
}
#box2 {
background-color:blue;
padding-top:10px;
}
</style>
</head>
<body>
<div id="box1"> 100*100 <br /> margin-left </div>
<div id="box2"> 100*100 <br /> padding-top </div>
</body>
</html>출력 결과
녹색 : 왼쪽마진 10px
파란색 : 위쪽패딩 10px
'Study > Knowledge' 카테고리의 다른 글
| [HTML/CSS] GET과 POST 방식 차이 (0) | 2020.03.21 |
|---|---|
| [HTML/CSS] Span과 Div 차이 (0) | 2020.03.21 |
| [HTML/CSS] Class, Id 차이 (0) | 2020.03.21 |
| IBK시스템 신입 JATIS 문제 및 후기 (12) | 2020.01.19 |
| 정보처리기사 단기합격 공부법 (0) | 2020.01.19 |
