Younho9 NotesCSS 속성 02. margin
❗️ 해당 글은 패스트캠퍼스 - 프론트엔드 개발 강의에서 HTML & CSS, SASS(SCSS) Part의 박영웅 강사님의 강의자료를 정리한 것입니다.
margin
요소의 ’외부(바깥) 여백’을 지정 - 단축 속성 (위 오른쪽 아래 왼쪽)
음수 값도 사용할 수 있다.
속성 값
| 값 | 의미 | 기본값 |
|---|---|---|
| 단위 | px , em , cm 등 단위로 지정 | |
| auto | 브라우저가 너비를 계산 | |
| % | 부모 요소의 너비에 대한 비율로 지정 |
% 를 margin 의 값으로 사용할 경우 부모 요소의 가로 너비에 대한 비율로 margin 을 사용하게 된다.
사용법
margin: 위 우 아래 좌; /* 시계 방향 */margin: 위 [좌, 우] 아래; /* 위 아래 방향 */margin: [위, 아래] [좌, 우]; /* 위,아래 + 좌,우 */margin: [위, 아래, 좌, 우]; /* 모든 방향 */
margin: 위 우 아래 좌; /* 시계 방향 */margin: 위 [좌, 우] 아래; /* 위 아래 방향 */margin: [위, 아래] [좌, 우]; /* 위,아래 + 좌,우 */margin: [위, 아래, 좌, 우]; /* 모든 방향 */
.box {margin: 10px 20px 30px 40px;margin: 10px 20px 40px;margin: 10px 40px;margin: 10px;}
.box {margin: 10px 20px 30px 40px;margin: 10px 20px 40px;margin: 10px 40px;margin: 10px;}
margin-top, right, bottom, left
요소의 ’외부(바깥 위쪽 여백)’을 지정
.box1 {margin: 10px 20px 30px 40px; /* 단축 속성 */}.box2 {/* 개별 속성 */margin-top: 10px;margin-right: 20px;margin-bottom: 10px;margin-left: 10px;}
.box1 {margin: 10px 20px 30px 40px; /* 단축 속성 */}.box2 {/* 개별 속성 */margin-top: 10px;margin-right: 20px;margin-bottom: 10px;margin-left: 10px;}
마진 중복(병합, Collapse)
마진의 특정 값들이 ’중복’되어 합쳐지는 현상
형제 요소들의
margin-top과margin-bottom이 만났을 때부모 요소의
margin-top과 자식 요소의margin-top이 만났을 때부모 요소의
margin-bottom과 자식 요소의margin-bottom이 만났을 때
’마진 중복’은 버그(오류)가 아니다. 현상을 우회하거나 응용할 수 있다.
형제 요소끼리 만났을 때
<div class="parent"><div class="child"></div><div class="child"></div><div class="child"></div></div>
<div class="parent"><div class="child"></div><div class="child"></div><div class="child"></div></div>
.parent {}.child {width: 100px;height: 100px;background: tomato;float: left; /* 블록 요소가 수평으로 쌓이게 해줌 */margin: 20px;}
.parent {}.child {width: 100px;height: 100px;background: tomato;float: left; /* 블록 요소가 수평으로 쌓이게 해줌 */margin: 20px;}
위의 예제에서 형제 요소들의 margin-right 와 margin-left 는 20px 이 더해져 40px 이 된다.
.parent {}.child {width: 100px;height: 100px;background: tomato;margin: 20px;}
.parent {}.child {width: 100px;height: 100px;background: tomato;margin: 20px;}
하지만 float: left; 속성을 제거하면, 블록 요소가 수직으로 쌓이게 되는데 이 때형제 요소들의 margin-top 과 margin-bottom 이 만나면서 margin 이 40px 이되는 것이 아니라 그대로 20px 임을 확인할 수 있다. 이것이 마진 중복이다.
부모 요소와 자식 요소가 만났을 때
<div class="parent"><div class="child"></div></div>
<div class="parent"><div class="child"></div></div>
.parent {width: 300px;height: 200px;background: cyan;}.child {width: 100px;height: 100px;background: tomato;margin-top: 50px;}
.parent {width: 300px;height: 200px;background: cyan;}.child {width: 100px;height: 100px;background: tomato;margin-top: 50px;}
위의 예제에서 자식 요소의 margin-top 이 50px 로, 부모 요소로부터 50px 의 margin 이 들어가길 기대했으나, 부모 요소 역시 50px 의 margin 이 들어가는것을 확인할 수 있다. 이것은 margin-bottom 일 때도 마찬가지이다.
이렇게 부모 요소의 margin-top 과 자식 요소의 margin-top 이 만나있다면 자식요소의 margin-top 이 합쳐지게 된다.
부모 요소의 margin-top 과 자식 요소의 margin-top 이 만나지 않도록 부모 요소에 padding: 10px; 을 추가하면 마진 중복이 발생하지 않는다.
마진 중복 계산법
마진 중복 현상이 발생 시, 중복 값을 계산하는 방법
| 조건 | 요소A 마진 | 요소B 마진 | 계산법 | 중복 값 |
|---|---|---|---|---|
| 둘 다 양수 | 30px | 10px | 더 큰 값으로 중복 | 30px |
| 둘 다 음수 | -30px | -10px | 더 작은 값으로 중복 | -30px |
| 각각 양수와 음수 | -30px | 10px | -30 + 10 = -20 | -20px |
Reference
패스트캠퍼스 - 프론트엔드 개발 강의 - HTML & CSS, SASS(SCSS) Part by ParkYoungWoong