발생하는 이유
인라인, 인라인 블록일 때 생깁니다.
마진겹침 현상 해결법
부모 요소에 border를 주거나(울타리를 쳐서 안에서 밖으로 못나가게)
부모 요소에 padding을 주거나(상자 - 뽁뽁이 - 물건 순으로 택배를 포장하듯)
부모 요소에 overflow: hidden을 주거나(자식 요소가 뭐든지 부모 요소를 기준으로 하게끔)
마진겹침 해결법
블록끼리 발생하는 마진겹침이므로 요소를 변경해주면 됩니다. 디스플레이: 인라인-블록으로 바꾸면 됩니다.
inline-block : 자기영역만큼만!
block : 한줄다!
라고 생각하지면 편할것같아여
컨텐츠안 정보가 전부다 inline-block면
옆으로 쭈루룰루ㅜㄱ~ 붙는데
컨텐츠안 정보가 block이면 밑으로 쭈루루룩 붙어요
디자인에따라 잡아야하는 모양이 달라질꺼에욤!
실제 코딩하시다보면 더 확실히 느끼실거에여!
마진겹칩 또는 마진병합 현상
마진겹칩은 세로에서만 현상이 나타납니다.
인접해있는 블록요소끼리만 일어납니다.
부모블록요소안에 자식블록요소 2명 있는데 자식블록요소 2명한테
margin-top주면 자식한테 먹는게 아니라 부모한테 적용이 된다.
부모블록요소, 자식블록요소 margin-top이면 마진겹칩이 생긴다.
부모블록요소, 자식블록요소 margin-bottom이면 마진겹칩이 생긴다.
margin-top, margin-bottom 현상이 나타나고,
margin-right, margin-left 한테는 나타나지 않는다.
코드를 기록하는 공간