Front-End/CSS
[CSS] Ex11_padding.html
이뮨01
2023. 6. 12. 10:55
박스 모델 구조의 padding을 배우다.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
#box{
width: 100px;
height: 100px;
background-color: yellow;
padding: 0px;
}
#box1{
width: 100px;
height: 100px;
background-color: red;
padding-left: 100px;
}
#box2{
width: 100px;
height: 100px;
background-color: skyblue;
padding-left: 200px;
}
#box3{
width: 100px;
height: 100px;
background-color: green;
padding-left: 300px;
}
/* padding: 테두리 기준으로 요소의 안쪽 여백을 지정하는 속성
(바깥) 테두리 - padding - 내용 (안)
*/
</style>
</head>
<body>
<h1>실습 시작</h1>
<div id="box">
BOX
</div>
<div id="box1">
BOX
</div>
<div id="box2">
BOX
</div>
<div id="box3">
BOX
</div>
</body>
</html>
테두리 기준으로 요소의 안쪽 여백을 채우는 것이기 때문에,
left를 사용하면 왼쪽에서 오른쪽으로 늘어나는 모습을 볼 수 있다.