박스 모델 구조의 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를 사용하면 왼쪽에서 오른쪽으로 늘어나는 모습을 볼 수 있다.
'Front-End > CSS' 카테고리의 다른 글
| [CSS] Ex13_borderRadius.html (0) | 2023.06.12 |
|---|---|
| [CSS] Ex12_BoxSizing.html (0) | 2023.06.12 |
| [CSS] Ex10_margin.html (0) | 2023.06.12 |
| [CSS] Ex09_none.html (0) | 2023.06.11 |
| [CSS] Ex08_display.html (0) | 2023.06.11 |
