CSS Margin & Padding

« Previous Next Chapter »

CSS margin 속성은 요소 주위의 공간을 정의합니다.

Margin

margin 은  요소 경계 바깥(outside the border)의 영역을 비웁니다 . margin 은 배경색을 가지지 않으며, 완전히 투명합니다.

위쪽, 오른쪽, 아래쪽, 왼쪽 마진은 별도의 속성을 사용하여 독립적으로 변경 될 수 있습니다. 단축형 margin 속성은 한 번에 모든 여백을 변경하는 데 사용할 수 있습니다.

Possible Values

Value Description
auto The browser calculates a margin
length Specifies a margin in px, pt, cm, etc. Default value is 0px
% Specifies a margin in percent of the width of the containing element
inherit Specifies that the margin should be inherited from the parent element

Note  Note: margin 은 negative 값을 가질 수 있으며, 내용들을 겹치게 할 때 사용할 수 있다.

Margin - 각각의 면들

CSS 에서 서로 다른 면들에 다른 margin을 지정할 수 있다.:

Example

p {
    margin-top: 100px;
    margin-bottom: 100px;
    margin-right: 150px;
    margin-left: 80px;
}
Try it yourself »

Margin - 단축형 속성

코드를 짧게 하기 위해서, 모든 margin관련 속성들을 하나의 속성에서 지정 할 수 있다. 이를 단축형 속성이라 하며, 모든 margin 속성의 단축형 속성은 "margin" 이다.:

Example

p {
    margin: 100px 150px 100px 80px;
}
Try it yourself »

The margin property can have from one to four values.

  • margin:25px 50px 75px 100px;
    • top margin is 25px
    • right margin is 50px
    • bottom margin is 75px
    • left margin is 100px

  • margin:25px 50px 75px;
    • top margin is 25px
    • right and left margins are 50px
    • bottom margin is 75px

  • margin:25px 50px;
    • top and bottom margins are 25px
    • right and left margins are 50px

  • margin:25px;
    • all four margins are 25px

Test Yourself with Exercises!

Exercise 1 »  Exercise 2 »  Exercise 3 » Exercise 4 »

All CSS Margin Properties

Property Description
margin A shorthand property for setting the margin properties in one declaration
margin-bottom Sets the bottom margin of an element
margin-left Sets the left margin of an element
margin-right Sets the right margin of an element
margin-top Sets the top margin of an element


CSS Padding

CSS padding 속성은 요소의 border 와 요소의 내용(content) 사이의 공백을 정의 합니다.

Padding

padding 은 요소 내용 주변의 영역을 지웁니다.  padding 은 요소의 background color 에 영향을 받는다.

top, right, bottom, 과 left padding 은 서로 다르게 독립적으로 변경할 수 있다. 모든 곳의 padding 을 한번에 바꾸려면, 단축형 속성을 사용할 수 있다.

Possible Values

Value Description
length Defines a fixed padding (in pixels, pt, em, etc.)
% Defines a padding in % of the containing element

Padding - Individual sides

CSS 에서 다른 면들에 다른 padding 을 지정 할 수 있다.:

Example

p {
    padding-top: 50px;
    padding-right: 30px;
    padding-bottom: 50px;
    padding-left: 80px;
}
Try it yourself »

Padding - Shorthand property

코드를 짧게 하기 위해서, 모든 padding 관련 속성들을 하나의 속성에서 지정 할 수 있다. 이를 닽축형 속성이라 하며, 모든 padding 속성의 단축형 속성은 "padding" 이다.:

Example

p {
    padding: 50px 30px 50px 80px;
}
Try it yourself »

The padding property can have from one to four values.

  • padding:25px 50px 75px 100px;
    • top padding is 25px
    • right padding is 50px
    • bottom padding is 75px
    • left padding is 100px

  • padding:25px 50px 75px;
    • top padding is 25px
    • right and left paddings are 50px
    • bottom padding is 75px

  • padding:25px 50px;
    • top and bottom paddings are 25px
    • right and left paddings are 50px

  • padding:25px;
    • all four paddings are 25px

Test Yourself with Exercises!

Exercise 1 »  Exercise 2 »  Exercise 3 »

All CSS Padding Properties

Property Description
padding A shorthand property for setting all the padding properties in one declaration
padding-bottom Sets the bottom padding of an element
padding-left Sets the left padding of an element
padding-right Sets the right padding of an element
padding-top Sets the top padding of an element

« Previous Next Chapter »