# 排版方式(1)：inline/block/inline-block
###### tags: `NKFW 網頁設計入門`
* display屬性
* 基本語法
* inline
* block
* inline-block
## display屬性
display在排版上是個重要的屬性，每一個html標籤在display屬性都有預設的參數，且大部分為inline或block。
本單元將聚焦在inline、block及inline-block這三個用於display屬性的參數介紹。
基本語法如下：
```htmlembedded!
選擇器名稱 {
display: inline-block;
}
p {
display: inline;
}
.DisplayBlock {
display: block;
}
```
```xml!
<p>......</p>
<p>...<strong>...</strong>...</p>
```
<!-- :::success
❓根據上面介紹的特性及舉例想想看，
到目前為止學過的標籤有哪些預設為inline，又有哪些預設為block？
::: -->ㄇ
## inline
### 預設為inline的標籤
* image
* anchor
* text decoration(important, emphasis...)
* span
### 特性
:::info
1. 可以與其他同層級元素（文字/標籤）出現在同一列(與其他元素分享橫列)。
2. 不可設定height, width。
3. padding, margin的寬度佔有空間(會排開其他元素)，高度則不佔有空間(不會排開其他元素)。
4. border不佔有空間，不排開其他元素。
:::
:::spoiler 上圖的部分原始碼
```xml!
<style>
strong {
width: 500px;
height: 60px;
padding: 30px;
border: 5px double red;
margin: 20px;
}
</style>
<h1>Heading</h1>
<p>Lorem ipsum dolor sit amet, <strong>adipisicing elit. Repudiandae, soluta. Illum, quas. </strong> Labore vero voluptates, aspernatur cum incidunt recusandae, dolore, esse id fugit sint dolores quam ipsum eaque laudantium quaerat.</p>
```
:::
## block
### 預設為block的標籤
* heading
* paragraph
* table
* form
* div
* ul
* li
### 特性
:::info
1. 不可與其他同層級元素（文字/標籤）出現在同一列(與其他元素分享橫列)。
2. 可設定height, width。
3. padding, margin的寬與高皆佔有空間，會排開其他元素。
4. border佔有空間，排開其他元素。
:::
:::spoiler 上圖的部分原始碼
```xml!
<style>
strong {
display: block;
width: 500px;
height: 60px;
padding: 30px;
border: 5px double red;
margin: 20px;
}
</style>
<h1>Heading</h1>
<p>Lorem ipsum dolor sit amet, <strong>adipisicing elit. Repudiandae, soluta. Illum, quas. </strong> Labore vero voluptates, aspernatur cum incidunt recusandae, dolore, esse id fugit sint dolores quam ipsum eaque laudantium quaerat.</p>
```
:::
<br>
將以下文字適當放入html檔案(或另外加上CSS)後，
```xml!
<style>
h1 {
display: inline;
}
</style>
<h1>This is the heading</h1>
<p>lorem...</p>
```
可以得到下方的效果。
:::success
❓想想看，為何上圖的"This is the heading及"lorem"(假文)不會出現在同一列。
:::
:::spoiler 解答
我們只對h1設定了inline，但並未對paragraph設定。若是想讓他們出現在同一列，則需要都進行設定(設定 p {display: inline})。
:::
## inline-block
### 特性
:::info
1. 兼具inline與block的部分特色
2. 可與其他同層級元素（文字/標籤）出現在同一列。
3. 可設定height, width
:::
:::spoiler 上圖的部分原始碼
```xml!
<style>
strong {
display: inline-block;
width: 500px;
height: 60px;
padding: 30px;
border: 5px double red;
margin: 20px;
}
</style>
<h1>Heading</h1>
<p>Lorem ipsum dolor sit amet, <strong>adipisicing elit. Repudiandae, soluta. Illum, quas. </strong> Labore vero voluptates, aspernatur cum incidunt recusandae, dolore, esse id fugit sint dolores quam ipsum eaque laudantium quaerat.</p>
```
:::
## 總整理
* inline:
* 可和其他 inline 或 inline-block 標籤同一橫列
* width、height 屬性沒效果
* padding 屬性有效果
* margin 屬性只有左右有效果
* inline-block:
* 可和其他 inline 或 inline-block 標籤同一橫列
* width、height、padding、margin 屬性都有效果
* block:
* 自己就佔了一橫列
* width、height、padding、margin 屬性都有效果
<!-- # Project：inline-block排版 - 又是導覽列
:::info
截至目前為止，我們學習了相當多的CSS屬性，例如color, background-color, display等，還有幾種特殊選取器，例如a:hover。
在這次的Project中，希望大家觀察底下網頁用到了哪些CSS屬性，並試著進行重現，當然也可以追加自己的設計想法上去！
:::
### nkfw.dstw.dev/demo/CSS/css_layout_1/Project/
:::spoiler 這是提示喔
:::info
提示1：上方的導覽列及下方的橫向清單使用到了本章節的內容。
提示2：奇怪了，怎麼會只有第一個字特別大，該如何讓選擇器只選擇第一個字的呢？
:::
:::spoiler 解答在這裡
```xml!
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
* {
margin: 0px;
}
h1,h2 {
margin: 16px;
}
nav {
background-color: deepskyblue;
text-align: center;
font-size: 0;
}
a {
font-size: 16px;
color: white;
background-color: chocolate;
display: inline-block;
padding: 16px;
text-decoration: none;
}
a:hover {
background-color: lightpink;
color: black;
}
p {
margin: 16px;
}
p::first-letter {
font-size: 32px;
}
p::selection {
color: chocolate;
background-color: aqua;
}
ul,li {
display: inline-block;
}
</style>
</head>
<body>
<nav>
<a href="#">Page1</a>
<a href="#">Page2</a>
<a href="#">Page3</a>
<a href="#">Page4</a>
<a href="#">Page5</a>
</nav>
<h1>Heading</h1>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Laudantium illum quod perspiciatis, culpa, neque alias porro repellendus voluptate inventore minus sequi pariatur magnam doloribus optio omnis? Voluptatem dignissimos odio ipsa!</p>
<h2>底下是一個橫向清單！</h2>
<ul>
<li class="row-list">item1</li>
<li class="row-list">item2</li>
<li class="row-list">item3</li>
<li class="row-list">item4</li>
<li class="row-list">item5</li>
</ul>
</body>
</html>
```
::: -->
Sign in with Wallet
Connect another wallet