Front-end/HTML & CSS
[CSS]margin과 padding: 박스 외부, 내부 여백
영벨롭
2022. 4. 5. 18:46
박스 포스팅(https://iridescent-zeal.tistory.com/95?category=1261251)에서 박스를 다루는 몇 가지 방법을 살펴보았습니다.
오늘은 박스의 구성하는 것들 중 margin과 padding을 자세히 살펴보겠습니다.
Margin 과 padding
margin은 박스 요소와 웹 페이지 사이의 여백 즉, 요소의 외부 여백을 지정하는 단축 속성입니다.
padding은 요소의 내부 여백을 지정하는 단축 속성입니다.
속성 값으로는 다음과 같은 값들을 지정할 수 있습니다.
(아래 설명은 padding에도 동일합니다.)
| 속성 값 | 설명 |
| 0 | 외부 여백 없음 |
| auto | 브라우저가 여백을 계산 |
| 단위 | px, em, vw 등 |
| % | 부모 요소의 가로 너비에 대한 비율로 지정 |
margin과 padding은 요소의 외부 여백을 지정하는 개별 속성이 있습니다. 여백을 한 번에 지정할수도, 특정 방향으로만 지정할 수도 있습니다.
| 속성 | 설명 |
| margin | 요소의 위/아래/왼/오른쪽 마진 한꺼번에 |
| margin-top | 요소의 바깥 위쪽 마진 |
| margin-bottom | 요소의 바깥 아래쪽 마진 |
| margin-left | 요소의 바깥 왼쪽 마진 |
| margin-right | 요소의 바깥 오른쪽 마진 |
위에서 언급한 단축 속성이란 margin의 속성값으로 주어지는 값의 개수에 따라 단축 키처럼 마진을 지정할 수 있는 속성인데요!
| margin의 단축속성 |
| margin: 상하좌우 |
| margin: 상하 좌우 |
| margin: 상 좌우 하 |
| margin: 상 우 하 좌 (시계방향) |
| 예시 | 설명 |
| margin: 10px; | 상하좌우 모두 10px 마진 |
| margin: 10px 20px; | 상하는 10px 좌우는 20px 마진 |
| margin: 10px 20px 30px; | 상 10px, 좌우 20px, 하 30px 마진 |
| margin: 10px 20px 30px 40px; | 상 10px, 우 20px, 하 30px, 좌 40px 마진 |
<body>
<div class="box1"></div>
<div class="box2"></div>
<div class="box3"></div>
<div class="box4"></div>
</body>
div {
width: 200px;
height: 100px;
background-color: skyblue;
}
.box1 {
margin: 30px 50px 30px 50px; /*상 우 하 좌*/
}
.box2 {
margin: 30px 50px; /*상하 좌우*/
}
.box3 {
margin: 50px; /*상하좌우*/
}
.box4 {
margin: 30px 5px 10px; /*상 좌우 하*/
}
반응형