tags: 2019年鐵人賽 、 css

前言

xxx，我命令你，恢復你原本的樣子！

在第一個切版練習時，完全不知道 HTML Tag 本身帶有預設的 CSS display 屬性，display 影響 Tag 在 webpage 的樣貌 ，所以一直陷入瞎用 CSS 調整版面位置的迴圈，這不科學啊！

學習來源

• MDN-Inline_elements

Inline elements

用過的有<a>、<img>、<span>、<mark>、<input>、<button>、<svg>，其他MDN有詳細列表，這裡不討論<img>也屬於Replaced element的狀況。
若不想查表也可用DevTool檢查display
範例

<span>Hi</span>

我理解的Inline element

摘自MDN
By default, inline elements do not force a new line to begin in the document flow.

Generally, inline elements may contain only data and other inline elements. You can't put block elements inside inline elements.

摘自Head First HTML and CSS
You can add padding to the top and bottom of inline element, but the padding doesn’t affect the spacing of the other inline elements around it, so the padding will overlap other inline elements

• 會在同個 row 並排顯示，適合用在水平排列
• 可包含 data 或其他 inline elements
• 不可將 Block elements 放入
• 若設定值給 margin-top、margin-bottom、padding-top、padding-bottom，不會推開周圍其他 inline elements ，只會覆蓋
• 呈現的寬隨內容決定，所以設定 width、 height 值也沒有效用

範例：設定 padding-top 和 padding-bottom 不會推開，只會覆蓋

<span class="a">test one</span><br>
<span class="b">test two</span>

span{
  outline:1px solid;
  font-size:30px;
}
.b{
  background-color: pink;
  padding:3px 0;
}

眉眉角角小技巧

• Fake images please?
  有很多假圖size可以使用
  <img src="https://fakeimg.pl/250x100/">