html div 태그 마스터하기 - padding, margin 설정

패딩(padding) 값과 (margin)값의 표현 위치와 값 수정에 따른 변화

---

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16

<div style="border : 1px solid blue;">     <div style="border : 1px solid red; padding:5px; margin:5px;" >         <div style="border : 1px solid #0054FF;">             #0054FF         </div>         <div style="border : 1px solid #47C83E;">             #47C83E         </div>         <div style="border : 1px solid #8041D9;">             #8041D9         </div>         <div style="border : 1px solid #F15F5F;">             #F15F5F         </div>     </div> </div>

빨간 라인을 기준으로 밖이 margin(노랑), 안쪽이 padding(소다?)

▲ margin : 10px; padding 5px;

▲ margin : 5px; padding 10px;

※ 만약 두개의 div에서 공통되는(겹치는 부분) 위치에 padding 또는 margin을 설정했을 경우 값이 큰 쪽의 결과값만 반영된다. 쉽게말하자면 각각 div의 padding 값이 5와 10일경우 10인 div의 padding 값만 적용되고 5는 무시된다는 얘기다. 결과적으로 15라고 생각할 수 있는 padding 값을 10이라고 보면 된다.