CSS에서의 여백
1. margin(요소의 바깥쪽 여백)
- 요소의 바깥쪽 여백을 지정할 때 사용함
- 바깥쪽 여백은 요소와 요소 사이의 여백(거리, 공간)을 생성할 때 사용을 함
- 속성에는 상단, 오른쪽, 하단,왼쪽 다르게 지정할 수 있음
- 사용법
margin: 10px 20px 30px 40px ==> 상단, 오른쪽, 하단, 왼쪽
margin: 10px 20px 30px ==> 상단, [오른쪽, 왼쪽], 하단
margin: 10px 30px ==> [상단, 하단], [오른쪽, 왼쪽]
margin: 10px ==> [상단, 오른쪽, 하단, 왼쪽]
2. padding(요소의 안쪽 여백)
- 요소의 안쪽 여백을 지정할 때 사용
- 단위 : px, em, cm 등의 단위로 지정
- % : 너비로 백분률 지정 가능
- 사용법
padding: 10px 20px 30px 40px ==> 상단, 오른쪽, 하단, 왼쪽
padding: 10px 20px 30px ==> 상단, [오른쪽, 왼쪽], 하단
padding: 10px 20px ==> [상단, 하단], [오른쪽, 왼쪽]
padding: 10px ==> [상단, 오른쪽, 하단, 왼쪽]
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<style type="text/css">
body {
margin: 0;
}
.box1 {
width: 300px; /* 가로 너비 */
height: 200px; /* 세로 너비 */
background-color: #FAED7D;
margin: 10px; /* 상하, 좌우 여백 */
}
.box2 {
width: 300px; /* 가로 너비 */
height: 200px; /* 세로 너비 */
background-color: #FFB2F5;
padding: 20px; /* 상하, 좌우 여백 */
box-sizing: border-box;
}
</style>
</head>
<body>
<div class="box1">1</div>
<div class="box2">2</div>
</body>
</html>
margin(외부 여백)을 설정한 box1
padding(내부 여백)을 설정한 box2
'Front-End > CSS' 카테고리의 다른 글
| [CSS] shadow 속성 (text-shadow, box-shadow) (0) | 2021.10.31 |
|---|---|
| [CSS] Border 속성 (+border-radius 속성) (0) | 2021.10.31 |
| [CSS] display 속성 (0) | 2021.10.28 |
| [CSS] 폰트 지정 (0) | 2021.10.27 |
| [CSS] CSS 특징과 기본 개념, CSS 스타일 지정 방법 (0) | 2021.10.27 |
댓글