250x250
Notice
Recent Posts
Recent Comments
Link
«   2025/04   »
일 월 화 수 목 금 토
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 29 30
Tags more
Archives
Today
Total
관리 메뉴

커리까지

CSS 수업 - 마진 겹침 2 본문

CSS

CSS 수업 - 마진 겹침 2

목표는 커리 2021. 3. 10. 08:01
728x90
SMALL
  • 부모와 자식 모두에 마진이 있을경우
<html>
    <head>
        <style>
            #parent{
                border:1px solid tomato;
                margin-top:100px;
            }
            #child{
                background-color:powerblue;
                margin-top:50px;
            }
        </style>
    </head>
    <body>
        <div id='parent'>
            <div id='child'>
                Hello world
            </div>
        </div>
    </body>
</html>

css12

  • 부모 태그의 border를 주석처리한 경우

13

  • child의 마진값이 부모의 마진 보다 넘어가면 내려간다.
  • parent는 child의 마진까지 작아지면 움직이지 않는다.
  • 부모가 투명한 경우 -> 부모와 자식과 비교했을 때 더 큰값이 사용된다.
728x90
LIST
저작자표시

'CSS' 카테고리의 다른 글

CSS 수업 - 포지션 1 : relative VS static  (0) 2021.03.12
CSS 수업 - 마진 겹침 3  (0) 2021.03.11
CSS 수업 - 마진 겹침 1  (0) 2021.03.09
CSS 수업 - box model  (0) 2021.03.08
CSS 수업 - inline block  (0) 2021.03.05
'CSS' Related Articles more
Comments