[CSS] Margin, Padding, Border

margin

• margin은 테두리의 밖으로 여백을 지정

margin: 20px	// 상하좌우 20px 여백
margin: 20px 15px	// 상하 : 20px, 좌우 15px
margin: 20px 15px 10px 5px // 상 우 하 좌 (시계방향 순으로 적용)

collapsing margins 현상

• 위, 아래의 경계면(테두리)이 붙어있을 경우 다른 항목이라도 margin이 같이 늘어남
  
• css code

<style>
    html{
        background-color: tomato;
    }
    body{
        margin: 20px 5px 15px 99px;
        background-color: pink;
    }
    div{
        margin:20px 15px;
        height: 150px;
        width: 150px;
        background-color: white;
    }
</style>

• 위의 그림과 같은 경우 흰색박스(A)와 분홍박스(B)의 위아래 경계면이 붙어있다.
  이런 경우에는 collapsing margins 현상이 일어나서 만약 div를 body사이에 margin 값을 주어 넣고 싶어도 body와 div는 붙어있어서 함께 움직인다.
• div의 margin top, bottom 값을 200px로 변경한 결과
  
• css code

<style>
    html{
        background-color: tomato;
    }
    body{
        margin: 20px 5px 15px 99px;
        background-color: pink;
    }
    div{
        margin:200px 15px;
        height: 150px;
        width: 150px;
        background-color: white;
    }
</style>

• 하얀박스와 분홍박스사이에 상하 여백을 넣고 싶은데 할 수 있는 방법이 없는 걸까?
  해당 현상을 해결하기위한 방법으로 padding를 사용하면 된다.

padding

• 경계면(테두리)으로 부터 안쪽에 있는 공간

padding: 20px	// 상하좌우 20px 여백
padding: 20px 15px	// 상하 : 20px, 좌우 15px
padding: 20px 15px 10px 5px // 상 우 하 좌 (시계방향 순으로 적용)
padding-top: 20px;
padding-bottom: 20px;
padding-left: 20px;
padding-right: 20px;

• css code

<style>
    html{
        margin: 0px;
        background-color: tomato;
    }
    body{
        padding: 20px;
        background-color: pink;
    }
    div{
        height: 150px;
        width: 150px;
        background-color: white;
    }
</style>

• body(분홍색) 안쪽으로 20px 만큼 공간이 생성되었다.

border

• border은 말그대로 박스의 테두리 이다.

border: 30px;
border-color: blue;
border-style: ridge;	// border은 이렇게 스타일을 정해줘야 표시되는것 같다

margin,border, padding 사용

이 그림을 보면 이해가 쉽다 !
border 중심으로 바깥쪽은 margin, 안쪽은 padding가 자리하고있다.
그리고 가장 중간에 150x150이라고 적혀있는 파란박스가 현재 컨텐츠인셈
나의 컨텐츠는 결국 70px(margin 20 + border 30 + padding 20)의 여백을 두고 그곳에 배치가 된다!

• css code

<style>
    html{
        margin: 0px;
        background-color: tomato;
    }
    body{
        padding: 20px;
        background-color: pink;
    }
    div{
    	padding: 20px;
        border: 30px;
        border-color: blue;
        border-style:ridge;
        margin: 20px;
        height: 150px;
        width: 150px;
        background-color: white;
    }
</style>