CSS Margins

CSS Margins

The CSS margin properties are used to create space around elements, outside of any defined borders.

With CSS, you have full control over the margins. There are properties for setting the margin for each side of an element (top, right, bottom, and left).

 

CSS 여백

 

css 여백 속성은 테두리의 바깥편, 요소의 주변의 공간을 만들기 위해 사용되어집니다.

너는 여백의 완벽한 제어권을 가진다.

요소의 각면에 대해서 여백을 설정하는 속성이 있다.

 

Margin - Individual Sides

CSS has properties for specifying the margin for each side of an element:

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

All the margin properties can have the following values:

• auto - the browser calculates the margin
• length - specifies a margin in px, pt, cm, etc.
• % - specifies a margin in % of the width of the containing element
• inherit - specifies that the margin should be inherited from the parent element

여백의 개별적인 면

 

css 는 요소의 각면에 대해서 여백을 명시하기 위한 설정을 가집니다.

 

그것은 margin-top, margin-right, margin-bottom, margin-left

 

 

모든 여백의 속성은 다음 따라오는 값을 가질수 있습니다.

 

auto : 브라우저가 여백을 계산한다.

 

length :  px, pt, cm 그밖에 값으로 마진을 명시한다.

 

% : 요소 내용물의 넓이를 %로 명시한다.

 

inherit : 부모의 요소로부터 상속되어진 마진을 명시한다.

 

Margin - Shorthand Property

To shorten the code, it is possible to specify all the margin properties in one property.

The margin property is a shorthand property for the following individual margin properties:

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

So, here is how it works:

If the margin property has four values:

 

 

짧게 작성하는 속성

 

코드를 짧게 하기 위해 모든 속성은 하나의 속성으로 명시하는 것이 가능하다.

margin 속성은 아래의 개별적인 마진 속성을 짧게 하기 위한 것이다.

 

여기 이것이 어덯게 작성되어지는지 알수 있다.

만일 margin 속성이 4가지 값을 가진다면, 

 

 

 

The auto Value

You can set the margin property to auto to horizontally center the element within its container.

The element will then take up the specified width, and the remaining space will be split equally between the left and right margins.

 

 

자동 값

너는 마진속성을 요소의 중앙에 자동으로 설정할수 있다.

요소는 명시된 넓이만큼 차지할수 있고, 남아있는 여백이 왼쪽과 오른쪽 사이에서 동등하게 분리 되어질 수 있다.

 

 

The inherit Value

This example lets the left margin of the <p class="ex1"> element be inherited from the parent element (<div>):

 

상속 값

 

다음 예시는 element (<div>) 부모 요소로 부터 상속되어진 <p class="ex1"> 요소는 left margin 이 설정되어있다.

 

 

Margin Collapse

Top and bottom margins of elements are sometimes collapsed into a single margin that is equal to the largest of the two margins.

This does not happen on left and right margins! Only top and bottom margins!

 

마진 붕괴

 

top 과 bottom 의 마진은 때때로 하나의 단일 여백( 두 마진의 넓이중 가장 큰 값과 같은 값으로 )으로 붕괴되어진다.

 

이것은 left, rifgt마진은 발생하지 않고, 오직 top과 bottom 여백에서만 발생한다.

 

 

In the example above, the <h1> element has a bottom margin of 50px and the <h2> element has a top margin set to 20px.

Common sense would seem to suggest that the vertical margin between the <h1> and the <h2> would be a total of 70px (50px + 20px). But due to margin collapse, the actual margin ends up being 50px.

 

위의 예에서 h1요소는 bottom은 50px이고, h2요소는 top 여백으로 20px로 설정되어있다.

보편적인 생각은 h1과 h2의 수직적인 마진은 70px(50px + 20px)로 생각할수 있을 것이다.

하지만 붕괴때문에 실제 마진은 결국 50px로 설정되어진다.