CSS에서 padding 여백 다루기
우리는 테두리 바깥쪽으로 여백을 만드는 속성 margin을 살펴보았습니다.
테두리 안쪽으로 여백을 만드는 매우 유사한 속성 padding도 있습니다.
이제 예제를 통해 이 속성이 어떻게 작동하는지 살펴보겠습니다. 먼저 여백이 없는 블록(텍스트가 경계에 붙어 있음)을 보여드리겠습니다:
<div id="elem">
some long text
</div>
#elem {
width: 300px;
border: 1px solid red;
text-align: justify;
}
:
이제 모든 면에 padding을 30px로 설정해 보겠습니다:
<div id="elem">
some long text
</div>
#elem {
padding: 30px;
width: 300px;
border: 1px solid red;
text-align: justify;
}
:
