-
CSS - margin 마진 겹침 현상프로그래밍/HTML & CSS 2021. 9. 22.반응형
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>Insert title here</title> <style type="text/css"> .box { width: 200px; border: 2px dotted gray; } .h { height: 100px; } .m { margin: 20px; } .p { padding: 1px; } .b { border: 1px solid rgba(0,0,0,0); } .orange{ background: orange; } .yellow { background: #ff0; } .green { background: #0f0; } </style> </head> <body> <h3>마진 겹침 현상-block 에서는 top와 bottom 마진이 겹칠 수 있다.</h3> <!-- 좌우는 모두 마진이 적용 되지만 상하는 한번만 적용 --> <div class="box"> <div class="orange m"> <div class="yellow m"> <div class="green m h">A</div> </div> </div> </div> <hr> <!-- 마진 겹침 현상을 padding로 해결 --> <div class="box"> <div class="orange m p"> <div class="yellow m p"> <div class="green m h p">A</div> </div> </div> </div> <hr> <!-- 마진 겹침 현상을 border 로 해결 --> <div class="box"> <div class="orange m b"> <div class="yellow m b"> <div class="green m h b">A</div> </div> </div> </div> <hr> <!-- 마진 겹침 현상을 inline-block 로 해결 --> <div class="box"> <div class="orange m" style="display: inline-block;"> <div class="yellow m" style="display: inline-block;"> <div class="green m h" style="display: inline-block;">A</div> </div> </div> </div> </body> </html>
A의 경우 마진 옵션이 전부 20px 씩 들어갔지만 상하는 모두 동일한걸 보면
좌우는 20px 전부 들어갔지만 상하는 한번만 들어간 모습을 확인 할 수있다.
padding으로 해결한 모습 이 문제를 해결하기 위해서 padding 옵션을 주면 된다.
각 모든 내부 요소에 패딩을 주면 된다.
오렌지 노랑 초록 색상 전부에 패딩을 준 모습.
border로 해결한 모습 border로도 해결이 가능하다.
역시 모든 내부 요소에 다 보더를 줘야한다.
inline-block으로 한 모습 margin이 위아래로 겹칠 때 해결 방법
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>Insert title here</title> <style type="text/css"> .box { width: 100px; height: 50px; border: 3px dotted gray; } .m1 { margin-bottom: 30px; } .m2 { margin-bottom: 15px; } .m3 { margin-top: 15px; } </style> </head> <body> <div class="box m1"></div> <div class="box"></div> <hr> <!-- 마진 위아래가 겹침. margin-bottom, margin-top을 조정해야 함 --> <div class="box m2"></div> <div class="box m3"></div> </body> </html>
겹쳐버림 
- 단순하게 margin-bottom이나 top 옵션을 줘서 떨어뜨리면 된다.
반응형'프로그래밍 > HTML & CSS' 카테고리의 다른 글
CSS - 영역 관련 (0) 2021.09.23 CSS - float 개요 (0) 2021.09.22 CSS - 다양한 옵션들 (0) 2021.09.22 CSS - 영역 관련 (0) 2021.09.22 CSS - 기초(5) / 글자의 공백 처리 및 배경 이미지 다루기 (0) 2021.09.21
