CSS_margin 겹칠때

dev.dave·2023년 7월 25일

CSS

목록 보기
8/30

마진 상쇄
(마진이 서로 겹치는 현상)

  1. 형제간에 마진이 있는경우 겹치고
    (같은 형제 sibling 일 경우, 마진이 서로 위아래로 있을경우(왼쪽 오른쪽은 상관없음) 겹치고, 마진이 많은 쪽이라면 많은 쪽이 덮어버림)

2.부모와 첫쨰자식혹은 마지막자식 간에 마진 겹침
(부모안에 자식이 들어가있는데, 마진이 있을경우 부모태그가 젤위에 있어야되는데 자식이 마진이 쌔면 부모를 덮어버림)

3.빈 블록
(빈 태그, 태그가 빈 즉, 컨텐츠가 없는경우 마진만 달랑 있는경우 마진끼리 겹쳐서 공간이 생겨버리게됨)

해결책>
블록 포맷 컨텍스트를 만드는방법이 해결책이다.

overflow:auto;
overflow:hidden;
는 비추다.

플롯 주고 위드값 100% 줘도 되고
float:left;
width:100%

포지션 해도된다.
position:absolute;

근데

젤 확실한 방법은

display:inline-block
width:100%
(위쓰는 필수는 아닙니다.)
주면 다 해결된다.

profile
🔥개인 메모 / 다른블로그 자료 참조 / 다른블로그 자료 퍼옴 (출처표기) /여기저기서 공부 했던 내용 개인메모 & 참고 / 개인 기록 용도 블로그 입니다.🔥

0개의 댓글