CSS 마argins
- 이전 페이지 CSS 둥근 테두리
- 다음 페이지 CSS 마argins 합쳐짐
CSS 마argins
CSS margin 속성은 정의된 경계선 이외에 요소 주위 공간을 만들기 위해 사용됩니다.
CSS를 통해 외경을 완전히 제어할 수 있습니다. 각 측(위, 오른쪽, 아래, 왼쪽)의 외경을 설정하는 데 사용할 수 있는 몇 가지 속성이 있습니다.
Margin - 단일 가장자리
CSS는 요소의 각 측에 외경을 지정하는 속성을 가집니다：
margin-topmargin-rightmargin-bottommargin-left
모든 외경 속성은 다음 값을 설정할 수 있습니다：
- auto - 브라우저가 외경을 계산
- length - px, pt, cm 등의 단위로 외경을 지정
- % - 포함 요소의 너비의 백분율로 외경을 지정
- inherit - 부모 요소에서 외경을 继承하도록 지정
ヒント：부정 값을 허용합니다。
예제
<p> 요소의 모든 네 가지 가장자리에 다른 외경을 설정합니다：
p {
margin-top: 100px;
margin-bottom: 100px;
margin-right: 150px;
margin-left: 80px;
}
Margin - 단축 속성
코드를 줄이기 위해 모든 외경 속성을 하나의 속성에서 지정할 수 있습니다。
margin 속성은 다음 각 외경 속성의 단축 속성입니다：
margin-topmargin-rightmargin-bottommargin-left
작동 원리는 다음과 같습니다：
만약 margin 속성에 네 가지 값을 설정합니다：
- margin: 25px 50px 75px 100px;
- 위쪽 외경은 25px입니다
- 오른쪽 외경은 50px입니다
- 아래쪽 외경은 75px입니다
- 왼쪽 외경은 100px입니다
예제
margin 단축 속성에 네 가지 값을 설정합니다：
p {
margin: 25px 50px 75px 100px;
}
만약 margin 속성에 세 가지 값을 설정합니다：
- margin: 25px 50px 75px;
- 위쪽 외경은 25px입니다
- 오른쪽과 왼쪽 외경은 50px입니다
- 아래쪽 외경은 75px입니다
예제
세 가지 값을 설정한 margin 단축 속성을 사용합니다：
p {
margin: 25px 50px 75px;
}
만약 margin 속성에 두 가지 값을 설정합니다：
- margin: 25px 50px;
- 위쪽과 아래쪽 외경은 25px입니다
- 오른쪽과 왼쪽 외경은 50px입니다
예제
두 가지 값을 설정하는 margin 단축 속성을 사용합니다：
p {
margin: 25px 50px;
}
만약 margin 속성에 값이 설정되었습니다：
- margin: 25px;
- 모든 네 가지 외경은 25px입니다
예제
값을 설정하는 margin 단축 속성을 사용합니다：
p {
margin: 25px;
}
auto 값
margin 속성을 설정할 수 있습니다}} auto으로 요소가 그릇 안에서 수평 중앙에 위치하게 합니다.
그런 다음, 이 요소는 지정된 너비를 차지하며, 남은 공간은 좌우 경계 사이에서 평균적으로 분배됩니다.
예제
사용 margin: auto：
div {
width: 300px;
margin: auto;
border: 1px solid red;
}
inherit 값
이 예제는 <p class="ex1"> 요소의 왼쪽 마진을 부모 요소(<div>)에서 상속받도록 합니다:
예제
inherit 값 사용:
div {
border: 1px solid red;
margin-left: 100px;
}
p.ex1 {
margin-left: inherit;
}
확장 읽기
교과서:박스 모델: CSS 마진
- 이전 페이지 CSS 둥근 테두리
- 다음 페이지 CSS 마argins 합쳐짐
