초보개발자의 성장블로그
CSS 26 box의 margin과 padding
프론트엔드/CSS2021. 4. 3. 21:57
padding
박스 안에 있는 content 와 border 사이의 여백 설정
margin
박스의 border 과 경계선 외부에 존재하는 요소 사이의 여백 설정
<!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>
p{background-color: yellow; color: red;font-weight: bold; font-size: 16pt;}
p.pad{color: purple; padding: 20px;}
p.mar{color: green; margin: 30px;}
p.mp{color: blue; padding: 5%; margin: 5%;}
</style>
</head>
<body>
<p>박스의 안쪽 여백과 바깥쪽 </p>
<p class="pad">(1) 안쪽 여백 지정-padding 20px</p>
<p class="mar">(2) 바깥쪽 여백 지정-margin 30px</p>
<p class="mp">(3) 안쪽, 바깥쪽 여백 지정-padding 5%, margin 5%</p>
</body>
</html>
<!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>
body{ font-weight: bold; font-size: 16pt;}
.mp1{background-color: aqua; color: red; margin-bottom: 40px; padding-left: 50px;}
.mp2{background-color: silver; color: green; margin: 20px; padding: 10px, 20px; }
.mp3{background-color: gray; color: purple; margin: 50px, 15px, 20px; padding: 20px; }
</style>
</head>
<body style="background-color: lightyellow;">
<p>박스 모델의 네 방향 여백 지정</p>
<p class="mp1">mp1</p>
<p class="mp2">mp2</p>
<p class="mp3">mp3</p>
</body>
</html>'프론트엔드 > CSS' 카테고리의 다른 글
| CSS 28 display inline 방식과 block 방식 (0) | 2021.04.03 |
|---|---|
| CSS 27 box의 shadow (그림자) (0) | 2021.04.03 |
| CSS 25 box의 border (경계선) (1) | 2021.04.03 |
| CSS 24 box content의 크기 설정 (0) | 2021.04.03 |
| CSS 23 box 모델 (0) | 2021.04.03 |
댓글()