- 여백을 조절하는 속성들

관리자 콘솔(F12)에서 쉽게 볼 수 있는 여백 구조

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>

margin을 적용하지 않아 div가 다 붙어있다.

<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>

div 간 30px 씩 공간이 생겼다.
주황색 영역이 margin이다.

2. padding 속성

패딩(padding)은 콘텐츠 영역과 테두리 사이의 여백이다.
.outer div {
    width: 200px; height: 150px; border: 2px solid; margin: 30px; float: left;
    padding:10px; /* 위에 상자에서 padding 추가 */
}

padding을 적용하여 제목, 내용 텍스트가 안쪽으로 들어왔다.
초록색 영역이 padding이다.

 

참고문헌 : 고경희(2019), HTML5+CSS3 웹 표준의 정석, 이지스 퍼블리싱

티스토리툴바