목록형제끼리 (1)
DevSSOM
CSS - 마진 병합 현상
형제간의 마진 병합 Hello World Hello World /* style.css 문서 */ .box1 { margin-bottom: 150px; } .box2 { margin-top: 100px; } 한 쪽은 150px이라고 하는 margin-bottom이고, 한 쪽은 100px margin-top이니까 box1과 box2영역의 마진 부분이 겹쳐. 공통된 부분을 두 개의 영역이 공유하게 되면, 이 공간의 크기는 250px이 되는게 아니라 150이 됨. 항상 큰 값에 우선순위가 있어서 큰 값이 작은 값을 병합시켜버리는 것. 부모-자식간의 마진 병합 /* style.css 문서 */ article { width: 200px; height: 200px; margin-top: 100px; } main이라고..
HTML, CSS
2021. 7. 14. 03:51