초보개발자의 성장블로그
CSS 23 box 모델
프론트엔드/CSS2021. 4. 3. 21:01
CSS3 박스모델은 content, padding, border, margin으로 구성되어있다.
박스모델의 padding, border, margin 속성의 기본값은 0이며,
상하좌우네가지방향을 top, bottom, left, right를 이용하여 지정할 수 있습니다.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
div{
background-color: yellow;
width: 300px;
padding: 25px;
border: 15px solid navy;
margin: 25px;
}
</style>
</head>
<body>
<p>CSS3 박스모델은content, padding, border, margin으로 구성되어있다.</p>
<div>박스모델의padding, border, margin 속성의 기본값은0이며,
상하좌우네가지방향을top, bottom, left, right를 이용하여 지정할 수 있습니다.</div>
</body>
</html>'프론트엔드 > CSS' 카테고리의 다른 글
| CSS 25 box의 border (경계선) (1) | 2021.04.03 |
|---|---|
| CSS 24 box content의 크기 설정 (0) | 2021.04.03 |
| CSS 22 조합 선택자 (1) | 2021.04.03 |
| CSS 21 가상 선택자 (0) | 2021.04.03 |
| CSS 20 기본 선택자 - 속성 선택자 (0) | 2021.04.03 |
댓글()