[Day 8] CSS 인라인과 블록 & 마진 병합 현상

어제부터 CSS 진도를 시작했는데,

배우는 내용마다 항상 빔캠프 종찬님의 행복 코딩 내용이 나와서 행복하다...

이번 포스트는 종찬님의 유튜브 영상과 오늘 수업의 코드 예시를 기반으로 작성되었다!

https://www.youtube.com/watch?v=c19Mjg-ivxc 

CSS를 배우는 중이라면 빔캠프 유튜브 채널을 강력 추천한다!!

 

 

1. 인라인, 블록레벨 요소

 

CSS에서 디자인 되는 모든 것들은 태초에 박스로 이루어져 있다.

박스의 유형에는 크게 블록박스와 인라인박스가 있다.

 

블록박스(Block box)

• width가 양 옆 100%이며,
• width와 height 속성을 가질 수 있다
• padding, margin, border 속성을 가질 수 있다.

 

인라인 박스(Inline box)

• 컨텐츠만큼의 크기를 가진다.
• width와 height 속성을 사용할 수 없다.
• padding, border, margin 속성 사용 가능하나, padding과 border는 상하좌우로 조절이 가능한 반면, margin은 좌우만 조절 가능하다.

 

블록과 인라인 박스의 특성을 알맞게 합쳐놓은 것이 바로

inline-block이다.

inline요소처럼 한 줄에 여러 개가 존재할 수 있지만,

block요소처럼 width,height,padding,margin 등의 모든 값을 지정할 수 있다.

 

 

2.마진병합현상(margin collapsing)

마진 병합이란 말 그대로 마진이 합쳐지는 것을 의미한다.

아래 예시를 보면 상하좌우 margin이 코드대로 50px로 나온 것을 확인할 수 있다.

See the Pen Untitled by Dahee Jo (@daheejo) on CodePen.

 

 

 

 

근데 이상한 점이 있다.

 

css에서 각각 마진을 50px 로 설정해주었으니

첫번째 h1박스 margin-bottom이 50px,  두번째 h1박스의 margin-top이 50px이니까

총 100px 이 되어야 되는 것이 아닌가?

 

라고 생각하는게 당연하지만,

 

css는 디자인적으로 더 보기 좋도록 첫번째와 두번째 박스 간의 margin을 합쳐버린다는 것인데!

이런 경우를 바로 마진병합이라고 부른다.

 

마진 병합이 일어나는 데에는 위에 예시의 상황과 같은 조건이 있어야 한다.

 

1) 인접한 블록 요소끼리만 일어난다

2) 상하단만 병합현상이 일어 난다.

 

 

다음의 예시도 살펴보자.

 

See the Pen Untitled by Dahee Jo (@daheejo) on CodePen.

 

 

이번 예시는 첫 번째 예시와 다르게 margin-top과 margin-bottom이 다른 경우이다.

.first박스는 아래 30px 마진이고 .second박스는 위 60px 마진이다.

 

이런 경우는 마진 값이 높은 쪽이 적용되기 때문에 

30+60=90px 마진이 아니라

그냥 30<60 -> 60px 마진이 된다!

 

 

마지막 예시도 살펴보자.

See the Pen Untitled by Dahee Jo (@daheejo) on CodePen.

 

 

 

이번에는 부모 요소와 자식요소인 경우이다.

자식요소의 마진이 부모요소의 마진(0)으로 병합되어 위의 마진이 없는 것처럼 보인다.

 

그렇다면,

이러한 마진 병합 현상을 일어나지 않게 하려면 어떻게 해야할까? 

 

1. 부모요소에 overflow:hidden 값을 적용시킨다.

2. 부모요소를 display: inline-block 설정을 통해 인라인블록으로 만든다.

3. 부모 요소에 border값을 설정한다.

 

 

 

보충이 필요한 점

마진 병합을 방지하는 방법엔 여러가지가 있는데,

어떤 때에 어떤 방법을 사용할지 좋을지에 대해서 잘 알아봐야할 것 같다.

특히 overflow라는 속성에 대해서 hidden과 그 외에 값들도 알아볼 것이다!