[HTML/CSS] CSS의 Margin속성
[HTML/CSS] CSS의 Margin속성
|
본 포스팅은 우선 CSS의 작성법 이해했다는 가정하에 작성되었습니다. 잘 모르겠으면 관련 포스팅을 참조해주세요. |
|
Margin은 Border의 바깥에 위치하는 바깥여백입니다. 모든 속성은 앞서 다룬 Padding과 동일하지만 두가지 특징이 더 있습니다. 첫째로는 (-)음수값을 사용할 수 있으며, 둘째로 Auto값을 지정 할 수 있습니다. 각 변을 따로 지정 할 수 있으며 다음과 같이 사용합니다. * Margin-Top * Margin-Bottom * Margin-Left * Margin-Right |
Margin
|
태그 |
속성 |
속성값 |
비고 |
|
style |
Margin |
여백값 |
px, %, em 등 |
|
바깥여백의 두께를 지정합니다. 각 변 마다 따로 지정해 줄수 있습니다. 예) p {margin-left: 30px} 코드 단축 을 위해 각 변을 규칙에 따라 한줄로 작성 할 수도 있습니다. 예) p {margin: -10px 20px 30px 40px;} 네가지 입력: top-right-bottom-left로 시계방향 순서입니다. 예) p {margin: -10px 20px 40px;} 세가지 입력: top-left&right-bottom으로 좌우가 같습니다. 예) p {margin: -10px 40px;} 두가지 입력: top&bottom-left&right로 상하가 같고 좌우가 같습니다. |
|
margin을 주게되면 border 바깥으로 여백이 생기며 (-)음수값으로 주게되면 여백이 요소 안으로 생기며 요소끼리 겹침이 발생합니다. 또한 Auto값을 주게되면 문단을 가운데 정렬 하는것이 아니라 여백을 균일하게 만들어 요소 자체가 가운데 위치하게 됩니다. |
< 연습하기 >
