---
title: Web 排版 概念 整理
tags: Web
description: 協助釐清Web排版的概念
---

# Web 排版 概念整理

<!-- Put the link to this slide here so people can follow -->
slide: https://hackmd.io/p/template-Talk-slide

---

## HTML Block and Inline Elements

### inline元素 愛排隊

<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>


https://codepen.io/xx78826/pen/mdLjZBJ

### block元素 山大王

<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>`


https://codepen.io/xx78826/pen/WNJKqoR

部分來自 w3school
部分來自 金魚都能懂的CSS

### 排序置中的方法

1.float: left;
https://codepen.io/xx78826/pen/zYjLgKg
2.margin: auto;
https://codepen.io/xx78826/pen/yLjqmgZ
3.display: flex;
align-items: center;
justify-content: center;
https://codepen.io/xx78826/pen/YzLjmVN

### box模式


If the padding property has four values:

padding: 25px 50px 75px 100px;
上 右 下 左
top padding is 25px
right padding is 50px
bottom padding is 75px
left padding is 100px

### 改變margin顏色
https://codepen.io/xx78826/pen/BaxPXPP

---

## Who am I?

- Front-end developer
- VSCode :heart:
- I use tabs. :cat:

---