[생활코딩] 마진 겹침 1
본문 바로가기
프레임워크/CSS

[생활코딩] 마진 겹침 1

by 은돌1113 2022. 1. 30.

마진(margin)이란 여백, 테두리와 다른 element 테두리 사이의 간격을 의미합니다.

그 마진이 어떤 경우에 사라져 버리는 현상이 있습니다. 이를 마진 겹침 현상이라고 합니다.

 

만약 마진 겹침 현상이 없었다면 위에 있는 h1과 아래에 있는 h1의 간격은

지금 중간에 위치하는 부분의 2배가 되어야 합니다.

 

"위에 있는 태그와 아래에 있는 태그의 마진 값 중에 더 큰 값이 두 개의 태그 사이의 간격이 된다."

 

이것이 가장 전형적인 형태의 마진 겹침 현상입니다.

 

만약에 마진 겹침 현상이 없었다면?
우리는 특정 px만큼만 띄우고 싶은 건데

양쪽 다 같은 마진을 먹는 다면 두 배의 간격이 생기기 때문에 보기 안좋아 집니다.

'프레임워크 > CSS' 카테고리의 다른 글

[생활코딩] relative vs static  (0) 2022.01.31
[생활코딩] 마진 겹침 2  (0) 2022.01.30
[생활코딩] box-sizing  (0) 2022.01.29
[생활코딩] box model  (0) 2022.01.29
[생활코딩] inline block  (0) 2022.01.29

댓글