CSS/개념정리
[속성] margin 속성
xowoony
2022. 9. 7. 23:27
학습일 : 2022. 09. 07
margin 속성
요소의 외부 여백을 지정하기 위해 사용한다.
외부 여백은 요소의 본래 크기로 인정되지 않는다.
상/하 외부 여백은 display 속성 값이 inline인 것(가령 a, span 등)에 대해서는 효과를 가지지 않는다.
요소를 가운데 정렬하기 위해 margin 속성 값을 '0 auto'로 두지 않는다. (구시대 방식)
용법 (한 개)
... {
margin: [?px|?rem|?%|...];
}
선택된 요소의 모든 방향에 대한 외부 여백을 지정한다.
퍼센트(%)값은 해당 요소를 포함하는 부모 요소의 크기에 대한 백분율이다.
용법 (두 개)
... {
margin: [상/하 : ?px|?rem|?%|...] [좌/우 : ?px|?rem|?%|...];
}
선택된 요소의 상/하 및 좌/우 외부 여백을 각각 지정한다.
용법 (네 개)
... {
margin: [상 : ?px|?rem|?%|...] [우 : ?px|?rem|?%|...] [하 : ?px|?rem|?%|...] [좌 : ?px|?rem|?%|...];
}
선택된 요소의 상, 우, 하, 좌 외부 여백을 각각 지정한다. (12시 부터 시계 방향으로 네 군데)
margin-top 속성
상부 외부 여백을 지정하기 위해 사용한다.
용법
... {
margin-top: [?px|?rem|?%|...];
}margin-right 속성
우측 외부 여백을 지정하기 위해 사용한다.
용법
... {
margin-right: [?px|?rem|?%|...];
}margin-bottom 속성
하부 외부 여백을 지정하기 위해 사용한다.
용법
... {
margin-bottom: [?px|?rem|?%|...];
}margin-left 속성
좌측 외부 여백을 지정하기 위해 사용한다.
용법
... {
margin-left: [?px|?rem|?%|...];
}<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>margin 속성</title>
<style>
div {
background-color: rgb(0,5,10);
color: rgb(255,255,255);
margin: 1rem;❤
}
</style>
</head>
<body>
<div>짜장면</div><div>짬뽕</div><div>볶음밥</div><div>중화비빔밥</div><div>탕수육</div>
</body>
</html>==============실행결과=============
