Study/Knowledge
[HTML/CSS] 패딩과 마진차이
bangu4
2020. 3. 21. 21:31
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
