(css) 블록 레벨 요소 in 박스모델

width, height 속성 - 콘텐츠 영역의 크기 (padding 안의 내용)

width: <크기> | <백분율> | <auto>

height: <크기> | <백분율> | <auto>

display 속성 - 화면 배치 방법 결정하기

블록 레벨 요소 -> 인라인 레벨 요소

인라인 레벨 요소 -> 블록 레벨 요소

display: none | contents | block | inline | inline-block | table | table-cell 등

1) block 속성 값 : 인라인 레벨 요소 -> 블록 레벨 요소

#block img {
   display:block;
   margin:10px;
}

<div id="block">
   <img src="images/pic1.jpg">
   <img src="images/pic2.jpg">
   <img src="images/pic3.jpg">
</div>

2) inline 속성 값 : 블록 레벨 요소 -> 인라인 레벨 요소

nav ul li {
   display: inline;
}

<nav>
   <ul>
      <li><a href="#">애완견 종류</a></li>
      <li><a href="#">입양하기</a></li>
      <li><a href="#">건강돌보기</a></li>
      <li><a href="#">더불어살기</a></li>
   </ul>
</nav>

3) inline-block 속성 값

: 인라인 레벨로 배치하면서 내용에는 블록 레벨 속성을 지정

nav ul li {
   display: inline-block;
   margin: 20px;
}

<nav>
   <ul>
      <li><a href="#">애완견 종류</a></li>
      <li><a href="#">입양하기</a></li>
      <li><a href="#">건강돌보기</a></li>
      <li><a href="#">더불어살기</a></li>
   </ul>
</nav>

4) none 속성 값

: 해당 요소를 화면에 아예 표시하지 않습니다.

visibility: hidden; 화면에서 감추기만 할 뿐 원래 요속 있는 공간은 그대로 차지

display: none; 아예 공간조차 차지하지 않음

출처 : Doit! html5 + css3 웹 표준의 정석