display 속성

• none : 없어진다
• inline : 글자화, 너비최소축소, 가능한 가로배열
  • inline : margin/padding 안됨 a span
  • inline-block : margin/padding 가능 img
• block : 블록화 너비최대확대, 가능한 세로배열
• flex , table : block 취급

---

 
<table border="2">
  <thead>
    <tr>
      <th>display</th>
      <th>너비</th>
      <th>높이</th>
      <th>표시 영역</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>block</td>
      <td>최대한으로 커진다</td>
      <td>최소한으로 줄어든다</td>
      <td>한 줄을 혼자 사용, 세로나열</td>
      
    </tr>
    <tr>
      <td>inline-block</td>
      <td>최소한으로 줄어든다</td>
      <td>최소한으로 줄어든다</td>
      <td>너비만큼 사용, 가로나열 </td>
    </tr>

  </tbody>
</table>

<h1>알아낸 사실</h1>
<ul>
  <li>div, section, nav, article의 display 속성 기본값은 block 이다.</li>
  <li>div, section, nav, article의 width 속성 기본값은 auto 이다.</li>
  <li>div, section, nav, article의 height 속성 기본값은 auto 이다.</li>
</ul>
<!-- html에 css 속성 넣기  -->
<style>
  th, td {
    padding:10px;
  }
  table {
    border-collapse: collapse;
  }

</style>

---

# 결과물 출력

 

display	너비	높이	표시 영역
block	최대한으로 커진다	최소한으로 줄어든다	한 줄을 혼자 사용, 세로나열
inline-block	최소한으로 줄어든다	최소한으로 줄어든다	너비만큼 사용, 가로나열

알아낸 사실

• div, section, nav, article의 display 속성 기본값은 block 이다.
• div, section, nav, article의 width 속성 기본값은 auto 이다.
• div, section, nav, article의 height 속성 기본값은 auto 이다.