box model은 각각의 태그들이 웹페이지에 표현 될 때 그 태그의 부피감, 여백, 위치, 크기를 결정하는 것을 말합니다.
각각의 태그들은 태그 바깥쪽에 사각형의 박스와 같은 모양으로 둘러싸여 있다고 해서 박스라는 표현을 사용합니다.
<!DOCTYPE html>
<html lang="en">
<head>
<style>
p,
a {
border: 10px solid red;
padding: 20px;
margin: 40px;
width: 100px;
}
</style>
</head>
<body>
<p>
Lorem, ipsum dolor sit amet consectetur adipisicing elit. Fuga, libero!
</p>
<p>
Lorem, ipsum dolor sit amet consectetur adipisicing elit. Fuga, libero!
</p>a
안녕하세요 <a>오새봄</a>
</body>
</html>
inline block에서는 width, height는 적용 되지 않는다(무시된다)
'프레임워크 > CSS' 카테고리의 다른 글
| [생활코딩] 마진 겹침 1 (0) | 2022.01.30 |
|---|---|
| [생활코딩] box-sizing (0) | 2022.01.29 |
| [생활코딩] inline block (0) | 2022.01.29 |
| [생활코딩] 캐스케이딩(Cascading) (0) | 2022.01.28 |
| [생활코딩] 상속 (0) | 2022.01.26 |
댓글