F2E合作社｜共用項目margin與padding｜Bootstrap 5網頁框架開發入門

前言

margin 和 padding 在網頁設計使用頻率很高，且語法輸入上也不難，一個翻譯成外邊距、另一個叫內邊距，常常會讓新手很困惑它們的差別，反正不管什麼內外邊距，少追點劇、未來無懼，看完這個入門課程後，若還有一些問題也可以看看 CSS保健室｜margin 和 CSS保健室｜padding 。

（ 圖片來源 ）

官方網站的 spacing 頁面

屬性設定

• m 表示 margin（ 外邊距 ）
• p 表示 padding（ 內邊距 ）

方向設定

• t 表示上方，用於設定 margin-top 或 padding-top
• b 表示下方，用於設定 margin-bottom 或 padding-bottom
• s 表示開始（ start ），如果是從左到右（ LTR ）的話用於設定 margin-left 或 padding-left ，如果是由右到左（ RTL ）則為 margin-right 或 padding-right
• e 表示結束（ end ），如果是從左到右（ LTR ）的話用於設定 margin-right 或 padding-right ，如果是由右到左（ RTL ）則為 margin-left 或 padding-left
• x 表示水平軸，同時設定 left 和 right
• y 表示垂直軸，同時設定 top 和 bottom
• 空白 表示設定 margin 或 padding 的四個邊

尺寸設定

• 0 設定 margin 或 padding 為 0
• 1 設定 margin 或 padding 為 $spacer * 0.25 （ 預設 ）
• 2 設定 margin 或 padding 為 $spacer * 0.5 （ 預設 ）
• 3 設定 margin 或 padding 為 $spacer （ 預設 ）
• 4 設定 margin 或 padding 為 $spacer * 1.5 （ 預設 ）
• 5 設定 margin 或 padding 為 $spacer * 3 （ 預設 ）
• auto 設定 margin 為 auto

（ 可以透過將項目增加到 $spacers Sass map 變數以新增更多尺寸 ）

斷點設定

xs 使用固定格式 {屬性}{方向}-{尺寸} 命名，而 sm 、 md 、 lg 、 xl 、 xxl ，使用格式 {屬性}{方向}-{斷點}-{尺寸} 命名。

範例

HTML

<div class="container pic-card">
    <div class="row">
        <div class="col-12 col-md-7 mb-2 mb-md-0">
            <div class="pic">
                <img src="https://picsum.photos/300/150?ramdom=10" class="w-100 img-thumbnail">
            </div>
        </div>
        <div class="col-12 col-md-7 ml-auto">
            <div class="text p-4">
                <h3>共用項目 margin 與 padding</h3>
                <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Culpa, aut nulla ducimus ipsum eum quaerat dignissimos?</p>
            </div>
        </div>
    </div>
</div>

CSS

.text {background-color: #ffa;}
@media screen and (min-width: 768px) {
    .pic-card .col-12:last-child {
        margin-top: -100px;
    }
}

桌機畫面

手機畫面

參考資料

1. Bootstrap v5.0.0-alpha2 的官方網站
2. Bootstrap5 共用項目margin與padding-金魚都能懂的Bootstrap5網頁框架開發入門 | 網頁開發 | 網頁教學
3. Spacing · Bootstrap v5.0
4. 間隔 (Spacing) · Bootstrap 5 繁體中文文件 - 六角學院 v5.0