[css] box의 구성 padding 과 margin .

모든 html의 요소는 사각형의 박스 모델을 가지고 있다. 이는 해당 요소가 동그랗게 생겨도 삼각형의 이미지를 가지고 있더라도 사각형의 박스를 가지고 있다. 이유는 html요소는 내부에 contents 이외에 padding , border, margin 으로 이루어져있기 때문이다.

  

동그란 div 

 

padding 

padding 속성은 border 윤곽선과 컨텐츠 사이의 여백이다. 

초록색 부분이 패딩이다

padding-top : border의 상단 부분과 컨텐츠의 여백

 

padding-right : border의 오른쪽 부분과 컨텐츠의 여백

 

padding-bottom : border의 아래 부분과 컨텐츠의 여백

 

padding-left : border의 왼쪽 부분과 컨텐츠의 여백

 

padding : 1px 1px 1px 1px  맨 처음 부터 위, 오른쪽, 아래, 왼쪽 여백

 

padding : 1px 한개만 작성하면 모든 방향에 고루 여백이 설정된다. 2개를 작성하면 첫번째는 위 아래 여백, 두번째는 오른쪽 왼쪽에 고루 설정된다. 

 

border

border는 contents와 padding까지를 감싸고 있는 윤곽선이다. 

 

border-top : 윤곽선 상단 부분

 

border-right : 윤곽선 오른쪽 부분 

 

border-bottom : 윤곽선 아래 부분

 

border-left : 윤곽선 왼쪽 부분

 

border : 크기, 윤곽선 형태, 색상 //형태는 solid, dotted, dashed, doubled, groove, ridge, inset, outset, none, hidden 이 있다 

 

https://msdn.microsoft.com/ko-kr/ie/ms530738(v=vs.94) 펌

margin

 

margin은 다른 html요소와의 거리이다. 

 

 

margin-top : 위쪽 요소와의 거리

 

margin-right : 오른쪽 요소와의 거리

 

margin-bottom : 아래쪽 요소와의 거리

 

margin-left : 왼쪽 요소와의 거리

 

margin : 위, 오른쪽, 아래, 왼쪽 // padding 과 동일하게 작동한다. 

 

정리하며 

padding과 border를 설정하면 설정한 width와 heigth 값보다 크게 나올 것이다. 이는 box-sizing 과 관련이 있는데 이는 추후에 포스팅 하도록 하겠다.