CSS margin속성은 정의된 테두리 외부의 요소 주위에 공간을 만드는데 사용된다.
여백을 완전히 제어할 수 있으며, 각 면 (위, 오른쪽, 아래, 왼쪽)에 여백을 설정하는 속성이 있다.
각 면에대한 속성
- margin-top
- margin-right
- margin-bottom
- margin-left
모든 여백 속성은 다음 값을 가질 수 있습니다.
- 자동 : 브라우저가 여백을 계산합니다.
- 길이 : px, pt, cm 등의 여백을 지정.
- % : 포함하는 요소 너비의 여백을 %로 지정.
- 상속 : 여백이 상위 요소에서 상속되어야 함을 지정.
코드를 단축하기 위해 하나의 속성에 여백 속성을 모두 지정할 수 있다.
속성 값이 4개 있는 경우
* 여백 : 50px 100px 80px 25px; (예를 들어서 값을 지정해 봄)
상단 여백은 50px
오른쪽 여백은 100px
하단 여백은 80px
왼쪽 여백은 25px
속성에 세 개의 값이 있는 경우
* 여백 : 25px 50px 75px;
상단 여백은 25px
오른쪽 여백은 50px
하단 여백은 75px
속성에 두 개의 값이 있는 경우
* 여백 : 25px 50px;
상단 및 하단 여백은 25px
오른쪽 및 왼쪽 여백은 50px
속성에 하나의 값이 있는 경우
* 여백 : 25px
네 개의 여백은 모두 25px
자동으로 값 주기
여백 속성을 설정하여 auto 해당 컴테이너 내에서 요소를 가로로 중앙에 배치할 수 있습니다.
요소가 지정된 너비를 차지하고 나머지 공간은 왼쪽과 오른쪽 여백 사이에서 균등하게 분할됩니다.
width: 100px;
margin: auto;
border: 2px solid red;
[CSS] CSS 박스모델 (0) | 2023.04.22 |
---|---|
[CSS] Padding(패딩) 속성 (0) | 2023.04.22 |
[CSS] CSS font-size에 대해서 알아보자. (0) | 2023.04.20 |
[CSS] CSS 텍스트 (0) | 2023.04.20 |
[CSS] CSS 배경 (0) | 2023.04.20 |
댓글 영역