- 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 | 최소한으로 줄어든다 | 최소한으로 줄어든다 | 너비만큼 사용, 가로나열 |