CSS 07_ 영역 관련 스타일

여백 및 간격 관련 스타일 

요소 영역 == content (내용물) + padding (여백) + border(테두리)

 

* padding : content 영역과  border영역 사이의 거리(여백)을 조절하는 스타일 속성

<h4>기준 div</h4>
<div class="test">기준 div</div>
<h3>padding</h3>
<div class="test" id="test1">컨텐츠영역</div><br>
<div class="test" id="test2">컨텐츠영역</div><br>
<div class="test" id="test3">컨텐츠영역</div>
<style>
        .test{
            background-color: pink;
            width:100px;
            height : 100px;
            border:10px solid black;
        }
        #test1{
            padding: 100px;
        }
        #test2{
            padding-top: 100px;
            padding-right: 20px;
            padding-bottom: 30px;
            padding-left: 10px;
        }
        #test3{
            padding: 100px 20px 30px 10px;/*위에서부터 시계방향(위 오른 아래 왼)*/
            padding: 50px 30px;/*위아래 좌우*/
        }
</style>

기준 div

기준 div

padding

컨텐츠영역

컨텐츠영역

컨텐츠영역

 

* margin : 타요소 간의 간격을 띄워주고자 할 때 사용 

<div class="test" id="test4">컨텐츠영역</div><br>
<div class="test" id="test5">컨텐츠영역</div><br>
<div class="test" id="test6">컨텐츠영역</div>
<style>
  #test4{
            margin: 50px;
        }
        #test5{
            margin-top: 100px;
            margin-left: 30px;
            margin-bottom: 20px;
        }
        #test6{
            margin:50px 30px 20px 10px;
            margin:auto;  /*화면의 중앙에 위치*/
        }
</style>

컨텐츠영역

컨텐츠영역

컨텐츠영역