티스토리 뷰
https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Box_Model/Mastering_margin_collapsing
Mastering margin collapsing - CSS: Cascading Style Sheets | MDN
The top and bottom margins of blocks are sometimes combined (collapsed) into a single margin whose size is the largest of the individual margins (or just one of them, if they are equal), a behavior known as margin collapsing. Note that the margins of float
developer.mozilla.org
div 내부의 div 의 top-margin 값을 부여했을때 내부 div이 아닌 바깥쪽 div의 margin이 변경되는 문제가 발생했다.
이런 경우가 margin-collapsing 이라는 용어가 따로 있었다.
margin-collapsing 이 발생하는 경우:
마진을 갖는 부모와 마진을 갖는 차일드가 있을때 부모가 시각적 요소가 없는 투명한 상태일때, 위 아래 마진은 더 큰 마진값을 갖는 마진을 따라간다. 즉 작은 마진 값을 갖고 있는쪽은 무시된다.
이런 경우 여러가지 해결 방법이 있었는데 간단한건 부모 div에 1px border를 부여하는 것이었다.
이 외에도 여러가지 해결방법이 있다.
꽤 애먹어서 기록해놓는다.
'html & css' 카테고리의 다른 글
| div 사이의 의도하지 않은 white space (0) | 2022.11.21 |
|---|---|
| semantic html (0) | 2021.08.19 |
| css) text-shadow, box-shadow (0) | 2021.08.19 |
| css) icon (font awsome) (0) | 2021.08.17 |
| css) variable (0) | 2021.08.17 |
- Total
- Today
- Yesterday
- C++
- permutation
- DP
- Dijkstra
- Brute Force
- Unity
- Kruskal
- Implementation
- CSS
- graph
- db
- priority queue
- Stack
- binary search
- Python
- 재귀
- C
- greedy
- two pointer
- 이분탐색
- back tracking
- floyd warshall
- recursion
- MVC
- 조합
- 자료구조
- Spring
- BFS
- Tree
- dfs
| 일 | 월 | 화 | 수 | 목 | 금 | 토 |
|---|---|---|---|---|---|---|
| 1 | 2 | 3 | 4 | 5 | 6 | 7 |
| 8 | 9 | 10 | 11 | 12 | 13 | 14 |
| 15 | 16 | 17 | 18 | 19 | 20 | 21 |
| 22 | 23 | 24 | 25 | 26 | 27 | 28 |