box model (박스모델) - margin

안녕하세요 찐망고입니다~

이 포스팅은 며칠 만에 마무리가 될지 모르겠지만 일단 시작해보도록 하겠습니다.

 

지난번 포스팅에서 제가 박스 모델 관련 padding과 border에 관해서 설명하였는데요~

2021.12.30 - [마크업/CSS] - box model (박스모델) - border와 padding

box model (박스모델) - border와 padding

오늘은 박스 모델에서 콘텐츠를 기준으로 border 바깥쪽 여백인 margin에 관해 포스팅을 시작할 겁니다.

 

요소의 바깥쪽 여백.

요소와 요소 사이의 여백이라고 볼 수 있는데

이  margin이라는 속성이 inline요소일 때와 block요소일 때도 다르고

부모 요소와 자식 요소에 사용할 때도 조금씩 달라요

저는 margin을 적용하는 방법을 포스팅하려는 건 아니란 건 다 아시죠?

일단 inline요소와 block요소의 차이를 봅시다.

 

body요소를 보니 display: block;과 margin: 8px; 가 보입니다.

저 사용자 에이전트 스타일시트는 실제 요소가 가지고 있는 기본 style속성으로

body요소는 block요소 성질과 기본값으로 마진 값을 8씩 가지고 있다는 뜻이죠~

오른쪽 박스 모델을 보면 margin-bottom, margin-left, margin-right, margin-top 각각 8px씩 들어가 있고

각 인라인 요소와 블록 요소를 보면 브라우저와 요소 사이에 여백이 보이는 걸 확인할 수 있을 거예요~

body처럼 margin값을 가지고 있는 특정 요소들이 있는데요. 

margin값을 일일이 기억하고 작업하는 게 쉽지도 않고 여백 없이 작업을 해야 하는 경우가 있어서

전체적으로 margin값은 초기화를 시켜주는 것이 좋습니다.

reset.css 기억하시나요? ㅎㅎ 요소들이 가지고 있는 기본값들을 초기화시켜주는 css죠~?

 

reset.css

각 요소를 일일이 불러와서 margin과 padding과 border를 0으로 맞춰주는 작업을 해줍니다 ㅎㅎ

 

span에 마진 값을 줘볼게요~

body의 margin은 0으로 돌려서 초기화를 시켜주었고, 두 span요소엔 margin을 10씩 줬는데요

그럼 위, 아래, 좌, 우 모두 들어가야 하는데 딱 봐도 좌우 만들어가는 게 보일 거예요~

 

div에도 줘볼까요?

div요소에 적용된 margin을 보면 위, 아래, 좌, 우가 잘 들어가는 게 보이실 거예요~

 

여기서 체크해야 할 포인트는

inline요소는 margin값이 좌우로만 들어간다는 점

block요소는 margin값이 위, 아래, 좌, 우 모두 들어간다는 겁니다.

그림상 보이는지 모르겠지만 겹쳐있는 div요소를 보면 

block요소 1에 margin-bottom이 10px이고 block요소 2에 margin-top이 10px일 테니

수치가 더해지면 20px이 나와야 하는데 여백이 다른 곳과 차이가 없습니다.

이건 margin의 중첩 현상 때문인데요

좌우로 만났을 경우엔 일어나지 않지만 위아래로 margin여백이 만나는 경우엔 중첩 현상이 발생해서

겹쳐진 margin값 중 큰 쪽의 수치를 따라가게 됩니다.

마지막 div요소에 제가 margin-top을 40px 추가했는데요

위 div요소에서 20px 아래 div요소에서 40px 하면 총 60px이 나와야 하는 게 맞지만 실제로는 40px만큼만 떨어지는 거죠

가장 흔하게 볼 수 있는 중첩 현상입니다.

 

참고로 margin값은 마이너스 값도 가능한데요~

마이너스 값을 줄 때도 똑같이 위아래로 적용되는 경우 중첩 현상이 일어나고, -값이 높은 값으로 적용됩니다.

margin-bottom이 -5px이고 margin-top이 -10px이면 -10px이 적용되는 거죠~

 

이번엔 다른 형태의 마진 적용 범위를 보여드릴게요~

요런 형태의 코드가 있고 header요소와 div요소가 각 부모 요소의 역할을 하고 있죠?

현재 이 구조에서 제가 h1이랑 div안에 첫 번째 p요소에 margin값을 줘볼 건데요~

현재 구조상 보면 header요소는 lightcoral색이고

그 자식인 h1요소에 margin-top을 50px 주었기 때문에 header와 h1사이에 50px만큼 여백이 생겨야 하는데요.

보시다시피 header자체가 50px만큼 내려와 있고 

실제 header위쪽으로 마진 공간이 생기는 게 보입니다.

상황상 보면 첫 번째 자식 요소에 마진 탑을 준만큼 부모 요소를 같이 내리는 거죠~

저는 개인적으로 부모 요소는 자식 요소를 모두 감싸야한다고 생각하므로,

저렇게 첫 번째 자식에겐 margin-top을 쓰진 않아요..

마진이라는 게 결과적으로 요소의 바깥쪽 여백인데, 어차피 부모 요소의 간격을 주려면 부모에게 직접 주는게 좋습니다.

부모요소 기준으로 자식 요소를 아래로 내리고 싶다면

지금처럼 margin-top보다는 부모 요소에 padding-top이나 자식 요소에게 padding-top을 주면 됩니다.

대신 패딩은 안쪽 여백이기 때문에 배경색을 넣거나 배경 이미지를 넣었을 경우엔 상황에 맞춰 넣는 게 좋습니다.

 

 

지금까지 마진이 적용된 사례를 보았습니다

 

정리를 해보자면

inline요소는 마진이 좌, 우만 적용

block요소는 마진이 위, 아래, 좌우 적용

 

마진이 요소 위아래로 만나는 경우 큰 수치만큼 여백이 넓어지고, 

마이너스값도 가능하며 마이너스값이 높은값으로 적용 됩니다.

 

부모요소를 기준으로 자식요소에도 마진값을 적용할 수 있는데

이때 주의할점은, 자식요소중 첫번째 요소에 margin-top을 적용시

부모오소와 자식요소 사이에 여백이 생기는 것이 아니라 

부모요소의 위쪽으로 여백이 생길 수 있는 점 기억해주세요.

 

 

다음엔 inline요소와 block요소의 정렬에 관련하여 포스팅 하도록 하겠습니다.