<css,style,html> CSS 컨텐츠 마진,패딩 스타일 margin,padding 속성

  

margin(마진) 요소에 대한 개념 및 속성 정리

 

margin (마진) 속성 정리

요소의 테두리부터, 요소의 바깥 가장자리까지의 공간을 의미합니다.
배경색상 및 이미지는 마진에 적용되지 않습니다.
박스모델에서 투명한 영역을 지칭합니다.

- 특정요소의 사각형 모든 방향으로 margin속성을 지정할 수 있고, 한쪽으로만, margin속성을 적용할 수 있습니다.
- 픽셀, em, 퍼센트 값도 가질 수 있음.

- em값 지정시 화면에 출력되는 콘텐츠의 글꼴 크기에 비례하여 변할 수 있습니다.
- 퍼센트값의 경우에는 속성이 적용된 요소의 전체크기를 기준으로 여백의 크기를 산정하고, 패딩과 테두리 모두 같은 방식으로 적용됩니다.

 

<첨부된 이미지를 참고하여, 개념정리>

 

 

마진(margin)은 테두리(border)기준으로, border 안쪽으로는 padding 이고,

border 바깥족으로 공백을 의미한다. (가로 방향 / 세로방향 모두포함)

 

 <속성>

 

- margin-top
- margin-left
- margin-bottom
-margin-right

 

: 4가지 속성은 모두 다른 값으로 지정이 가능합니다.
그리고 margin 속성에서 값을 하나 또는 그 이상 지정 가능하며, 여러 개의 값을 지정할 경우에는 공백으로 구분합니다.

 

속성의 형식은 아래와 같습니다.
 

<속성의 형식>

 

margin :  길이   |   퍼센트   |   auto   |   inherit
(margin-top, margin-right, margin-bottom, margin-left)  / 예시 : margin: 15 10 15 10px; / 마진값을 위 15 / 오른쪽 10 / 아래15 / 왼쪽 10

 

 

margin:15px; / 마진 값을 한 번만 지정할 경우 네 곳에 값은 값 적용.
margin:15px 100px; / 값을 두 번 지정할 경우 위쪽, 아래쪽, 왼쪽, 오른쪽 순으로 적용됩니다.
margin:50px 70px 100px; / 값을 세 번만 지정할 경우 위쪽, 왼쪽, 오른쪽, 아래쪽 순으로 적용됩니다.

<margin collapsing>

: 마진 겹침 현상 또는 마진 통합 현상이라고 합니다.
세로 방향으로 마진을 지정한 두개의 서로 다른 요소가 수직방향으로 접해 있을때 두 요소 사이의 마진 간격은 두개 요소 각각의 바깥 여백을
합한 값이 아니라, 두 요소의 마진 수치값 가운데 큰 수치값을 선택하게 됩니다.

 위쪽 마진과 아래쪽 마진이 겹쳐서, 마진이 하나로 합쳐질때 두개의 마진값 중에 큰 값으로 적용됩니다. 

 

# 나도 이 게시글을 보기전까지는

많이 헷갈렸었다.

 

"대체 뭐가 다른것일까?" 하고

 

하지만

부연설명 제외하고 딱 저 그림만으로도 확 이해가 될 수 있었다.

나와 비슷하게 어떤개념인지는 알지만

 

확실하게 알지 못하는 분들을 위해

가져왔다. 많은 도움되시길,

 

출처 : http://means24.blog.me/30114525521