웹표준,웹접근성(html, html5, css, css3, javascript, jQuery, jQueryMobile, snecha, senchaTouch, php, mobileWebApp)
margin 외부여백 본문
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="utf-8" />
<title>외부여백 - margin</title>
<style type="text/css">
.margin_test {
width: 500px;
margin: 10px 0 15px;
background: tan;
}
em {
margin: 0 10px;
}
</style>
<!--
margin-left: 100px; /* 처리 */
margin-left: -100px; /* 처리 */
padding: 0 0 0 100px; /* 처리 */
padding: 0 0 0 -100px; /* 처리X 0으로 처리 */
-->
</head>
<body>
<div class="margin_test">
margin은 음수(-)값 설정 가능.<br />
padding은 양수(+)만 설정 가능.
</div>
<div class="margin_test">
<em>2개의 블록 박스</em><em>가 상하로 마주쳤을 때</em>,
상단 블록 박스의 하단 외부여백 값과 하단 블록 박스의
상단 외부여백 값 중 큰 값으로 두 박스 사이의 상하 공간이
설정된다. (상, 하 마진은 겹쳐짐. 좌, 우 마진은 안 겹쳐짐)
</div>
</body>
</html>
'css' 카테고리의 다른 글
| background (0) | 2011.11.11 |
|---|---|
| min-width 최소 가로폭 설정 (0) | 2011.11.11 |
| 실제 콘텐츠가 없는 CSS 디자인 하기 (0) | 2011.11.11 |
| before, after (0) | 2011.11.11 |
| CSS 가상으로 요소 추가 (0) | 2011.11.11 |