📐 CSS 박스모델 요약!

박스 모델 : 박스 형태의 콘텐츠

block 요소에만 적용 가능

content, padding, border, margin으로 구성

• content : 내부 컨텐츠
• padding : 내부 여백
• border : 테두리
• margin : 외부 여백

 

margin과 padding 작성 방법 (비슷하므로 같이 서술)

• margin-top, right, bottom, left : 방향을 따로 입력
• margin 값 1개 : 모든 방향에 같은 마진이 적용
• margin 값 2개 : 상하, 좌우 순서로 적용
• margin 값 4개 : 상, 우, 하, 좌 순서로 적용

 

margin : <크기> | <백분율> | auto

auto : display속성에서 지정한 값에 맞게 적절한 값을 자동으로 지정함
🐍 화면 가운데 배치 하려면 left와 right를 auto로 지정하면 둘이 똑같이 됨
ex) margin : 0 auto;

 

⭐ 마진 병합(margin overlap) 현상

형제지간의 마진 병합

#box1 {
      margin-bottom:150px;
}  

#box2 {
      margin-top:100px;
}

 

• 요소들을 세로로 배치할 경우 마진과 마진이 만날 때 마진값이 큰 쪽으로 겹쳐지는 현상 (좌우로 만날 때는 중첩 안 됨)
• margin-bottom과 margin-top 중 크기가 큰 값으로 적용됨 (위 예시에서는 150px)

 

부모자식간의 마진 병합

main {
      /*마진을 설정해두지 않음*/
}
    
article {
      margin-top:100px;
}

• 자식에게 margin을 설정하면 부모 요소에도 영향을 끼쳐 적용이 됨. (예를 들어 위 예시에서는 margin-top이 100px만큼 부모에게도 적용됨)