0055 CSS의 마진(Margin)과 패딩(Padding) 영역 설정하기

0055 CSS의 마진(Margin)과 패딩(Padding) 영역 설정하기

마진(Margin) 영역은 테두리(border) 바깥을 둘러싸고 있는 영역이고 패딩(Padding) 영역은 내용 영역과 테두리 사이에 있는 영역이다(박스모델 참조).

   

마진(Margin)과 패딩(Padding) 영역은 투명하고 배경을 그대로 노출하므로 오직 두께(width)만 별도로 설정한다.

    

마진(Margin) 영역의 두께(width)를 설정하는 CSS의 속성은 margin 속성(property)이다. 

패딩(Padding) 영역의 두께(width)를 설정하는 CSS의 속성은 padding 속성(property)이다. 

마진(Margin)과 패딩(Padding) 영역의 두께(width) 설정은 테두리(border)처럼 각 4방향(상하좌우) 별로 설정이 가능하다.

   

margin-top → 위쪽 마진의 두께(width)

margin-right → 오른쪽 마진의 두께(width)

margin-bottom → 아래쪽 마진의 두께(width)

margin-left → 왼쪽 마진의 두께(width)

   

padding-top → 위쪽 패딩의 두께(width)

padding-right → 오른쪽 패딩의 두께(width)

padding-bottom → 아래쪽 패딩의 두께(width)

padding-left → 왼쪽 패딩의 두께(width)

물론, 이렇게 4방향을 전부 작성하는 것이 매우 번거로우므로 보통은 단축 속성(shorthand property)인 margin과 padding 속성(property)으로 축약하여 작성한다.

    

margin 속성과 padding 속성은 1~4개의 속성값을 가질 수 있으며, border-style과 마찬가지의 방식으로 적용된다. 

   

margin과 padding 속성(property)에 4개의 속성값이 주어지면 각각의 속성값이 위(top)에서부터 시계방향으로 위, 오른쪽, 아래, 왼쪽으로 차례대로 적용된다.

    

margin: 10px 8px 6px 4px;

--------------------

margin-top: 10px;

margin-right: 8px;

margin-bottom: 6px;

margin-left: 4px;

    

padding: 6px 4px 2px 1px;

--------------------

padding-top: 6px;

padding-right: 4px;

padding-bottom: 2px;

padding-left: 1px;

margin과 padding 속성(property)에 3개의 속성값이 주어지면 각각의 속성값이 위(top), 좌우(left and right), 아래(bottom)로 차례대로 적용된다.

    

margin: 10px 4px 6px;

--------------------

margin-top: 10px;

margin-right: 4px;

margin-bottom: 6px;

margin-left: 4px;

   

padding: 6px 2px 4px;

는 아래와 동일하다.

padding-top: 6px;

padding-right: 2px;

padding-bottom: 4px;

padding-left: 2px;

margin과 padding 속성(property)에 2개의 속성값이 주어지면 각각의 속성값이 위아래(top and bottom), 좌우(left and right)로 차례대로 적용된다.

   

margin: 10px 4px;

--------------------

margin-top: 10px;

margin-right: 4px;

margin-bottom: 10px;

margin-left: 4px;

   

padding: 6px 2px;

--------------------

padding-top: 6px;

padding-right: 2px;

padding-bottom: 6px;

padding-left: 2px;

margin과 padding 속성(property)에 1개의 속성값이 주어지면 그 속성값이 상하좌우에 전부 적용된다. 

   

margin: 4px;

--------------------

margin-top: 4px;

margin-right: 4px;

margin-bottom: 4px;

margin-left: 4px;

   

padding: 2px;

--------------------

padding-top: 2px;

padding-right: 2px;

padding-bottom: 2px;

padding-left: 2px;

margin과 padding 속성(property)이 가질 수 있는 속성값은 길이(length) 단위다. 절대 길이와 상대 길이 단위에 대해서는 여기를 참조하기 바란다.

    

0043 CSS의 길이(length) 중 절대 길이(absolute length)

0044 CSS의 길이(length) 중 상대 길이(relative length)

margin이나 padding의 속성값으로 상대 길이(relative length) 중 %를 쓰게 되면 부모(상위) 요소의 margin이나 padding의 속성값의 상대 길이로 작용된다는 점을 주의하자.

Anki 파일

아래는 본 포스팅의 내용을 갈무리하기 위한 Anki 파일입니다. 참고하시기 바랍니다. 

Ankilog 파일:   0055 CSS의 마진(Margin)과 패딩(Padding) 영역 설정하기.apkg