# CSS 25. inline-block 是什麼? 有哪些 tag ?

### 要知道 inline-block，需要先知道哪些是 inline or block?

- [參考 W3C HTML Block and Inline Elements](https://www.w3schools.com/html/html_blocks.asp)

### Here are the block-level elements in HTML:

- 這些都是 block tag:

<address>
<article>
<aside>
<blockquote>
<canvas>
<dd>
<div>
<dl>
<dt>
<fieldset>
<figcaption>
<figure>
<footer>
<form>
<h1>-<h6>
<header>
<hr>
<li>
<main>
<nav>
<noscript>
<ol>
<p>
<pre>
<section>
<table>
<tfoot>
<ul>
<video>

### Here are the inline elements in HTML:

- 這些都是 inline tag:

<a>
<abbr>
<acronym>
<b>
<bdo>
<big>
<br>
<button>
<cite>
<code>
<dfn>
<em>
<i>
<img>
<input>
<kbd>
<label>
<map>
<object>
<output>
<q>
<samp>
<script>
<select>
<small>
<span>
<strong>
<sub>
<sup>
<textarea>
<time>
<tt>
<var>

---

### img 是 inline 屬性，卻可以設定寬高是為什麼?

- 根據上表格，以及 W3C 給的資訊，img 是 inline elements

但卻可以執行寬高的設定，這看起來並不合理?

- **inline-block** 的屬性：

- inline 屬性: 根據物件的 content 來產生寬高。無法設定
- block 屬性: 預設寬度為：100% (for 瀏覽器)，可自行設定

而 inline-block 則同時具備上面兩種條件。

### 這些 inline-block 你必須要知道。

- 其中有五個 inline-block 屬性，我們需要記住他們。

img // 圖片
input 
button
select // 下拉式選單？
textarea // 留言輸入框

###### tags: `2022 網頁開發全攻略教程 / CSS篇章 - other`