내부 파란색 상자(contents)를 기준으로 각각
padding
boder
margin
margin : 테두리를 기준으로 요소의 바깥여백 지정
 |
| 편의성의 문제로 많이 쓰이지는 않음 |
 |
| 각 방향의 설정은 다음과 같이 진행한다. |
※실습 스크립트 - margin
<style>
div{
width: 100px;
height : 100px;
}
#redBox{
background-color: red;
/* margin: 10px 5px; */
border-radius: 50%;
}
#blueBox{
background-color: blue;
margin-left: 100px;
border-radius: 50%;
}
#greenBox{
background-color: green;
margin-left: 200px;
border-radius: 50%;
}
#garyBox{
background-color: gray;
margin-left: 300px;
border-radius: 50%;
}
</style>
</head>
<body>
<div id = "redBox">
</div>
<div id = "blueBox">
</div>
<div id = "greenBox">
</div>
<div id = "garyBox">
</div>
</body>
</html>
※수행 결과
 |
| -margin 영역 만큼 차지 |
padding : 테두리를 기준으로 요소의 안쪽여백 지정
 |
| margin 옵션과 유사한 형태 |
 |
| 각 방향의 padding 또한 동일하게 지정한다. |
※실습 스크립트 - padding
<style>
div{
width: 100px;
height : 100px;
color: white;
}
#redBox{
background-color: red;
}
#blueBox{
background-color: blue;
padding-left: 100px;
}
#greenBox{
background-color: green;
padding-left: 200px;
}
#garyBox{
background-color: gray;
padding-left: 300px;
}
</style>
. . .
<body>
<div id = "redBox"> red
</div>
<div id = "blueBox">blue
</div>
<div id = "greenBox">green
</div>
<div id = "garyBox">gray
</div>
</body>
※수행 결과
-각 개체가 늘어난 것으로 보이나, 실제로는 내부 padding 영역이 각 개체의 색깔(default)을 따라 늘어난 것이다.
 |
| 실제로는 붉은 영역 내에서 padding 크기가 커짐 |
댓글
댓글 쓰기