[CSS] 박스 모델

block vs inline

 

 

h1으로 묶여 있는 부분은 block level element : 화면 전체를 쓰는 태그

 

a 태그로 묶여 있는 부분은 inline element : 자기 자신의 콘텐츠 크기 만큼을 쓰는 태그

---

 

block : width와 height 지정할 수 있음

         <div>, <h1>, <p>, <ul>, <ol>, <form>

inline : width와 height 지정할 수 없음

         <span>, <a>, <img>

 

※ display라는 속성을 이용하여 block을 inline으로, inline을 block으로 바꿀 수 있습니다

---

 

---

padding vs margin

 

 

padding: 콘텐츠와 테두리 사이 간격

 

margin: 테두리와 테두리 사이 간격

 

 

참고 사진