---
# System prepended metadata

title: 排版方式(1)：inline/block/inline-block
tags: [NKFW 網頁設計入門]

---

# 排版方式(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>
```

![](https://i.imgur.com/cs6heuh.png)

<!-- :::success
❓根據上面介紹的特性及舉例想想看，
到目前為止學過的標籤有哪些預設為inline，又有哪些預設為block？
::: -->ㄇ

## inline

### 預設為inline的標籤

* image
* anchor
* text decoration(important, emphasis...)
* span


### 特性

:::info
1. 可以與其他同層級元素（文字/標籤）出現在同一列(與其他元素分享橫列)。
2. 不可設定height, width。
3. padding, margin的寬度佔有空間(會排開其他元素)，高度則不佔有空間(不會排開其他元素)。
4. border不佔有空間，不排開其他元素。
:::

![](https://i.imgur.com/b628R4S.png)

:::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佔有空間，排開其他元素。
:::

![](https://i.imgur.com/xuNG8PV.png)

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

可以得到下方的效果。

![](https://i.imgur.com/EqbnV4N.png)

:::success
❓想想看，為何上圖的"This is the heading及"lorem"(假文)不會出現在同一列。
:::

:::spoiler 解答
我們只對h1設定了inline，但並未對paragraph設定。若是想讓他們出現在同一列，則需要都進行設定(設定 p {display: inline})。
:::

## inline-block

### 特性

:::info
1. 兼具inline與block的部分特色
2. 可與其他同層級元素（文字/標籤）出現在同一列。
3. 可設定height, width
:::


![](https://i.imgur.com/efDOSSm.png)

:::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/
![](https://i.imgur.com/9eF57Au.png)

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