CSS Box Model
https://www.w3schools.com/css/를 참고
출처:CSS Box Model은 기본적으로 모든 HTML 요소들의 영역을 상자로 표현한 것을 말한다.
각 HTML 요소들의 영역은 Margin, Border, Padding, Content로 나뉜다.
- Content - 텍스트와 이미지 등이 표시되는 공간이다.
- Padding - Content와 Border 사이의 여백이다.
- Border - Padding과 Content를 둘러싸는 테두리이다.
- Margin - 테두리 밖의 여백이다.
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
<html>
<head>
<style>
div {
background-color: lightgrey;
width: 500px;
border: 15px solid green;
padding: 50px;
margin: 20px;
}
</style>
</head>
<body>
<h3>Demonstrating the Box Model</h3>
<p>The CSS box model is essentially a box that wraps around every HTML element. It consists of: borders, padding, margins, and the actual content.</p>
<div>This text is the content of the box. We have added a 50px padding, 20px margin and a 15px green border. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</div>
</body>
</html>
Demonstrating the Box Model
The CSS box model is essentially a box that wraps around every HTML element. It consists of: borders, padding, margins, and the actual content.
This text is the content of the box. We have added a 50px padding, 20px margin and a 15px green border. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
Box Model을 사용할 때 “border-bottom” 이런 식의 속성도 사용할 수 있다.
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
<html>
<head>
<style>
h3 {
border-bottom: 1px solid black;
padding-bottom: 10px;
}
</style>
</head>
<body>
<h3>The CSS Box Model</h3>
<p>In CSS, the term "box model" is used when talking about design and layout.</p>
<p>The CSS box model is essentially a box that wraps around every HTML element. It consists of: margins, borders, padding, and the actual content.</p>
</body>
</html>
The CSS Box Model
In CSS, the term "box model" is used when talking about design and layout.
The CSS box model is essentially a box that wraps around every HTML element. It consists of: margins, borders, padding, and the actual content.