tags: 2019年鐵人賽 、 css

學習來源

• MDN-Block-level elements

Block-level element

用過的有<div>、<p>、<h1>~<h6>、<ul>、<li>等等。其他MDN有詳細列表

我理解的Block element

摘自MDN
By default, block-level elements begin on new lines.

Generally, block-level elements may contain inline elements.

• 自己獨佔一整個 row，Block elements 各自會從新的 row 開始，適合垂直排列時的操作
• 可包含其他 block elements 或 inline elements
• width 預設會填滿父層寬度
• 可以設定 width、height、margin、padding

範例
HTML，沒有設定CSS

<p>我是p</p>
<h1>我是h1</h1>
<div>我是div</div>

1. Block 元素會從新的 row 開始
   

2. width 預設會填滿父層寬度

   • 藍色區表示 <p> 的內容，內容寬度自動佔滿整個父層
   • 要注意 HTML tag 在瀏覽器呈現都不太ㄧ樣， 像 <p> tag 在 Chrome 有 margin-top 和 margin-bottom，所以才有 reset 或 normalize 來清除預設樣式