CSS 마진 Margin

마진에는 top, right, bottom, left가 있다.

요소의 각 측면은

margin-top

margin-right

margin-bottom

margin-left

로 지정할 수 있다.

모든 마진 속성은 다음 값을 가질 수 있다.

auto - 브라우저가 마진을 계산한다.

length - px, pt, cm 등으로 마진 지정

% - 포함하는 요소의 너비에 대한 마진을 %로 지정

inherit - 부모 요소로부터 상속되어야 하는 마진을 지정

음수 값 허용됨

상하좌우에 다른 마진 설정

margin-top: 100px;
margin-bottom: 100px;
margin-right: 150px;
margin-left: 80px;

margin - shorthand 속성

하나의 속성에 모든 마진 속성을 지정할 수 있다.

위에서 각각 지정한 것을 한번에 쓰려면

margin:100px 150px 100px 80px;

수평적으로 가운데 정렬을 하려면 auto를 쓴다. 요소는 특정 너비를 갖고 나머지 공간은 좌우 여백이 동등하게 분리된다.

margin:auto;

inherit 값

p태그는 p태그의 부모인 div의 왼쪽 여백 속성을 상속 받는다. div의 왼쪽 여백 100px로 인해 빨간 테두리의 왼쪽에 여백이 있고 div 안에 있는 p 역시 빨간 왼쪽 테두리를 기준으로 왼쪽에 여백이 있다.

div {

    border: 1px solid red;

    margin-left: 100px;

}

p.ex1 {

    margin-left: inherit;

    border:solid blue;

}

This paragraph has an inherited left margin (from the div element).

margin collapse

h1의 margin-bottom:50px; h2의 margin-top:20px; 일지라도 위, 아래 마진은 큰 값인 50px가 된다. 왼쪽 오른쪽 마진은 margin collapse 현상이 없다.

https://www.w3schools.com/css/css_margin.asp