250x250
Notice
Recent Posts
Recent Comments
Link
«   2024/11   »
일 월 화 수 목 금 토
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 수업 - 마진 겹침 3 본문

CSS

CSS 수업 - 마진 겹침 3

목표는 커리 2021. 3. 11. 08:11
728x90
SMALL
<html>
    <head>
        <style>
            #empty{
                margin-top:50px;
                margin-bottom:100px;
                border:1px solid tomato;
            }
            #normal{
                backgrouund-color:powerblue;
                margin-top:100px;
            }
        </style>
    </head>
    <body>
        <div id='empty'></div>
        <div id='normal'>normal</div>
    </body>
</html>

css14

  • 두개의 마진이 겹쳤다.
  • 시각적인 요소가 없으면 마진이 없어진다.
  • 시각적인 요소가 없다면 위,아래 중에 큰 값이 그것의 마진값이 된다.
  • 시각적인 요소가 들어가면 위,아래 마진이 모두 들어간다.
728x90
LIST
저작자표시

'CSS' 카테고리의 다른 글

CSS 수업 - 포지션 2 : absolute  (0) 2021.03.15
CSS 수업 - 포지션 1 : relative VS static  (0) 2021.03.12
CSS 수업 - 마진 겹침 2  (0) 2021.03.10
CSS 수업 - 마진 겹침 1  (0) 2021.03.09
CSS 수업 - box model  (0) 2021.03.08
'CSS' Related Articles more
Comments