[css] 여백 (margin, padding) 속성
[css] 여백 (margin, padding) 속성
css 에서 margin 과 padding 속성은 border 를 기준으로 각각 바깥쪽 여백, 안쪽 여백을 의미한다.
margin과 padding 은 값을 1~4 개 까지 지정할 수 있다.
div { margin: 5px 10px 15px 20px; } /* top-5px, right-10px, bottom-15px, left-20px */
div { margin: 5px 10px 15px; } /* top-5px, right&left-10px, bottom-15px */
div { margin: 5px 10px; } /* top&bottom-5px, right&left-10px */
div { margin: 5px; } /* all-5px */
margin 속성 사용법
auto : 브라우저가 자동으로 마진을 계산 한다.
length : 마진을 부동 소수점 숫자 뒤로 절대 단위 지정자(cm, mm, in, pt, pc) 또는 상대 단위 지정자(em, ex,px) 가 오는 값을 지정한다. 기본값은 0px 이다.
% : 마진을 퍼센트로 폭을 적용 한다.
inherit: 부모 요소로부터 값을 상속 받는다.
padding 속성 사용법
length : 패딩을 부동 소수점 숫자 뒤로 절대 단위 지정자(cm, mm, in, pt, pc) 또는 상대 단위 지정자(em, ex,px) 가 오는 값을 지정한다. 기본값은 0px 이다.
% : 패딩을 퍼센트로 폭을 적용 한다.
inherit: 부모 요소로부터 값을 상속 받는다.
기본 html 소스
<!DOCTYPE html>
<html>
<head>
<title></title>
<style>
div.container {
display: inline-block;
margin: 5px 5px;
background: #52D4FF;
border:1px dotted #333;
}
div.container div {
display: inline-block;
width: 180px;
height: 100px;
font-weight: bold;
font-size: 13px;
text-align: left;
background: #FF63EA;
border:1px solid #333;
}
div#a-box {
margin: 10px;
padding: 0;
}
div#b-box {
margin: 10px 20px;
padding: 0;
}
div#c-box {
margin: 0;
padding: 10px 20px 5px;
}
div#d-box {
margin: 10px;
padding: 10px 20px;
}
div#e-box {
margin: 10px 20px 0 30px;
padding: 30px 0;
}
</style>
</head>
<body>
<div class="container">
<div id="a-box">
a-box<br />
margin: 10px;<br />
padding: 0;
</div>
</div>
<div class="container">
<div id="b-box">
a-box<br />
margin: 10px 20px;<br />
padding: 0;
</div>
</div>
<div class="container">
<div id="c-box">
a-box<br />
margin: 0;<br />
padding: 10px 20px 5px;
</div>
</div>
<div class="container">
<div id="d-box">
a-box<br />
margin: 10px;<br />
padding: 10px 20px;
</div>
</div>
<div class="container">
<div id="e-box">
a-box<br />
margin: 10px 20px 0 30px;<br />
padding: 30px 0;
</div>
</div>
</body>
</html>
실행 결과는 아래와 같다.
'develop > css' 카테고리의 다른 글
| [css] overflow-x 와 overflow-y 의 속성 (0) | 2017.10.24 |
|---|---|
| [css] overflow (visible, hidden, scroll, auto) 속성 (0) | 2017.10.23 |
| [css] position (static, relative, absolute, fixed) 의 속성 (1) | 2017.09.25 |
| [css] clear(none, both, left, right) 의 속성 (0) | 2017.09.24 |
| [css] float(none, left, right) 의 속성 (0) | 2017.09.24 |