> For the complete documentation index, see [llms.txt](https://lochiwei.gitbook.io/web/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://lochiwei.gitbook.io/web/html/block-vs-inline.md).

# block vs. inline

* :green\_book: [CSS inline vs. inline-block vs. block](https://www.samanthaming.com/pictorials/css-inline-vs-inlineblock-vs-block/)

 block

* **width: 100%** by default
* **height**: determined by content.
* 可設定 width, height
* 排版時會佔據整行(**由上往下**排)

 •  inline

* **不能**設定 **width**, **height**。(width 由 content 決定) ⭐️ 
* 排版時**由左至右**。
* **不能**設定 **margin-top**, **margin-bottom**。⭐️ 

 •  inline-block 

* 排版像 inline 元素**由左往右**排，
* 但可設定 **width**, **height** 像 block 元素。
* 內建的 inline-block 元素共五個：img, button, select, input, textarea

## block elements

[\<address>](https://www.w3schools.com/tags/tag_address.asp)[\<article>](https://www.w3schools.com/tags/tag_article.asp)[\<aside>](https://www.w3schools.com/tags/tag_aside.asp)[\<blockquote>](https://www.w3schools.com/tags/tag_blockquote.asp)[\<canvas>](https://www.w3schools.com/tags/tag_canvas.asp)[\<dd>](https://www.w3schools.com/tags/tag_dd.asp)[\<div>](https://www.w3schools.com/tags/tag_div.asp)[\<dl>](https://www.w3schools.com/tags/tag_dl.asp)[\<dt>](https://www.w3schools.com/tags/tag_dt.asp)[\<fieldset>](https://www.w3schools.com/tags/tag_fieldset.asp)[\<figcaption>](https://www.w3schools.com/tags/tag_figcaption.asp)[\<figure>](https://www.w3schools.com/tags/tag_figure.asp)[\<footer>](https://www.w3schools.com/tags/tag_footer.asp)[\<form>](https://www.w3schools.com/tags/tag_form.asp)[\<h1>-\<h6>](https://www.w3schools.com/tags/tag_hn.asp)[\<header>](https://www.w3schools.com/tags/tag_header.asp)[\<hr>](https://www.w3schools.com/tags/tag_hr.asp)[\<li>](https://www.w3schools.com/tags/tag_li.asp)[\<main>](https://www.w3schools.com/tags/tag_main.asp)[\<nav>](https://www.w3schools.com/tags/tag_nav.asp)[\<noscript>](https://www.w3schools.com/tags/tag_noscript.asp)[\<ol>](https://www.w3schools.com/tags/tag_ol.asp)[\<p>](https://www.w3schools.com/tags/tag_p.asp)[\<pre>](https://www.w3schools.com/tags/tag_pre.asp)[\<section>](https://www.w3schools.com/tags/tag_section.asp)[\<table>](https://www.w3schools.com/tags/tag_table.asp)[\<tfoot>](https://www.w3schools.com/tags/tag_tfoot.asp)[\<ul>](https://www.w3schools.com/tags/tag_ul.asp)[\<video>](https://www.w3schools.com/tags/tag_video.asp)

## inline elements

{% hint style="warning" %}
inline elements **can't** change **width** and **heigh**.
{% endhint %}

[\<a>](https://www.w3schools.com/tags/tag_a.asp)[\<abbr>](https://www.w3schools.com/tags/tag_abbr.asp)[\<acronym>](https://www.w3schools.com/tags/tag_acronym.asp)[\<b>](https://www.w3schools.com/tags/tag_b.asp)[\<bdo>](https://www.w3schools.com/tags/tag_bdo.asp)[\<big>](https://www.w3schools.com/tags/tag_big.asp)[\<br>](https://www.w3schools.com/tags/tag_br.asp)[\<button>](https://www.w3schools.com/tags/tag_button.asp)[\<cite>](https://www.w3schools.com/tags/tag_cite.asp)[\<code>](https://www.w3schools.com/tags/tag_code.asp)[\<dfn>](https://www.w3schools.com/tags/tag_dfn.asp)[\<em>](https://www.w3schools.com/tags/tag_em.asp)[\<i>](https://www.w3schools.com/tags/tag_i.asp)[\<img>](https://www.w3schools.com/tags/tag_img.asp)[\<input>](https://www.w3schools.com/tags/tag_input.asp)[\<kbd>](https://www.w3schools.com/tags/tag_kbd.asp)[\<label>](https://www.w3schools.com/tags/tag_label.asp)[\<map>](https://www.w3schools.com/tags/tag_map.asp)[\<object>](https://www.w3schools.com/tags/tag_object.asp)[\<output>](https://www.w3schools.com/tags/tag_output.asp)[\<q>](https://www.w3schools.com/tags/tag_q.asp)[\<samp>](https://www.w3schools.com/tags/tag_samp.asp)[\<script>](https://www.w3schools.com/tags/tag_script.asp)[\<select>](https://www.w3schools.com/tags/tag_select.asp)[\<small>](https://www.w3schools.com/tags/tag_small.asp)[\<span>](https://www.w3schools.com/tags/tag_span.asp)[\<strong>](https://www.w3schools.com/tags/tag_strong.asp)[\<sub>](https://www.w3schools.com/tags/tag_sub.asp)[\<sup>](https://www.w3schools.com/tags/tag_sup.asp)[\<textarea>](https://www.w3schools.com/tags/tag_textarea.asp)[\<time>](https://www.w3schools.com/tags/tag_time.asp)[\<tt>](https://www.w3schools.com/tags/tag_tt.asp)[\<var>](https://www.w3schools.com/tags/tag_var.asp)