반응형
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>패딩 마진</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="ko">
<head>
<meta charset="UTF-8">
<title>패딩 마진 여백 네 방향 지정</title>
<style>
body {
background-color: lightyellow;
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 10px 20px 10px;
padding: 10px 20px;
}
.mp3 {
background-color: gray;
color: purple;
margin: 50px 15px 20px;
padding: 20px 10px 20px 10px;
}
</style>
</head>
<body>
<p>박스 모델의 네 방향 여백 지정</p>
<div class="mp1">mp1</div>
<div class="mp2">mp2</div>
<div class="mp3">mp3</div>
</body>
</html>
반응형
'IT > CSS' 카테고리의 다른 글
| CSS - 2일차 display (0) | 2023.05.11 |
|---|---|
| CSS - 2일차 position (0) | 2023.05.11 |
| CSS - 1일차 list-style (0) | 2023.05.10 |
| CSS - 1일차 폰트(텍스트꾸미기, 대소문자변환, 글간격) (0) | 2023.05.10 |
| CSS - 1일차 폰트(글자색, 텍스트정렬, 줄간격) (0) | 2023.05.10 |