[HTML/CSS] 박스 모델

박스 모델 구조

margin / border / padding / content

 

margin과 padding 의 차이

<style>
    div {
        margin-left: 100px;
        padding-left: 100px;
    }
</style>

margin-left

• border 바깥쪽에서 왼쪽에 여백을 만듦

padding-left

• border 안쪽에서 왼쪽에 여백을 만듦
• 공간이 여백을 포함한 크기로 변경되는 점 유의

 

margin과 padding 작성 방법

<style>
    div { margin: 100px 0 0 100px; }
</style>

• top right bottom left 순서로 한 줄에 작성 가능 (시계방향)
• padding도 동일