728x90
- 여백을 조절하는 속성들
1. margin 속성
마진(margin)은 현재 요소 주변의 여백이다.
→ 한 요소와 다른 요소 사이의 간격을 조절할 수 있다.
<head>
<style>
.outer div {width: 200px; height: 150px; border: 2px solid;}
.o1 {margin: 10px auto; width: 700px;}
</style>
</head>
<body>
<div class="outer o1">
<div class="inner">
<h3>제목</h3>
<p>내용</p>
</div>
<div class="inner">
<h3>제목</h3>
<p>내용</p>
</div>
<div class="inner"></div>
<div class="inner"></div>
</div>
</body>
<head>
<style>
/* margin 추가 */
.outer div {width: 200px; height: 150px; border: 2px solid; margin: 30px; float: left;}
.o1 {margin: 10px auto; width: 700px;}
</style>
</head>
<body>
<div class="outer o1">
<div class="inner">
<h3>제목</h3>
<p>내용</p>
</div>
<div class="inner">
<h3>제목</h3>
<p>내용</p>
</div>
<div class="inner"></div>
<div class="inner"></div>
</div>
</body>
2. padding 속성
패딩(padding)은 콘텐츠 영역과 테두리 사이의 여백이다.
.outer div {
width: 200px; height: 150px; border: 2px solid; margin: 30px; float: left;
padding:10px; /* 위에 상자에서 padding 추가 */
}
참고문헌 : 고경희(2019), HTML5+CSS3 웹 표준의 정석, 이지스 퍼블리싱
728x90