CSS中box-model的差異

box-model介紹

box-model是CSS的基礎,而CSS的本質就是包裝HTML的外框,而box-model就是由四個重要的值組合而成,分別由外到內為margin  ( 外邊距 )、border  ( 邊框 ) 、padding  ( 內邊距 )、content  ( 內容 ) (參考下圖)

box-model

margin   ( 外邊距 )

是盒子的外邊距離,是盒子之間的距離,呈現為透明無色

呈現方式

先設定全部的盒子都有

  • 背景粉
  • 邊框1px,紅色
  • 高跟寬都100px
  • 設定盒子2、3跟6、7到中間,方便觀察
  • 最後在6、7設定margin 10px,觀看差別

※這裡用到CSS選擇器跟display屬性呈現,可以參考以下文章:

CSS中display的屬性差異

HTML

<div class=”box”>我是盒子1</div>

    <div class=”box-mid”>我是盒子2</div>

    <div class=”box-mid”>我是盒子3</div>

    <div class=”box”>我是盒子4</div>

    <div class=”box”>我是盒子5</div>

    <div class=”box-mid box-margin”>我是盒子6</div>

    <div class=”box-mid box-margin”>我是盒子7</div>

    <div class=”box”>我是盒子8</div>

CSS

    <style>

        [class^=”box”] {

            height: 100px;

            width: 100px;

            background: pink;

            border: 1px solid red;

        }

        .box-mid {

            display: inline-block;

        }

        .box-margin {

            margin: 10px;

        }

    </style>

程式執行結果

可以看到每個盒子的大小不變,唯一改變的是被設定margin的6跟7盒子之間的上下左右距離被拉大了

我是盒子1
我是盒子2
我是盒子3
我是盒子4
我是盒子5
我是盒子6
我是盒子7
我是盒子8

padding   ( 內邊距 )

box裡面的間距,裡面的顏色依照背景色所控制

呈現方式

先設定全部的盒子都有

  • 背景粉
  • 邊框1px,紅色
  • 高跟寬都100px
  • 設定盒子2、3跟6、7到中間,方便觀察
  • 最後在6、7設定 padding 10px,觀看差別

※這裡用到CSS選擇器跟display屬性呈現,可以參考以下文章:

CSS中display的屬性差異

HTML

    <div class=”box”>我是盒子1</div>

    <div class=”box-mid”>我是盒子2</div>

    <div class=”box-mid”>我是盒子3</div>

    <div class=”box”>我是盒子4</div>

    <div class=”box”>我是盒子5</div>

    <div class=”box-mid box-padding”>我是盒子6</div>

    <div class=”box-mid box-padding”>我是盒子7</div>

    <div class=”box”>我是盒子8</div>

CSS

    <style>

        [class^=”box”] {

            height: 100px;

            width: 100px;

            background: pink;

            border: 1px solid red;

        }

        .box-mid {

            display: inline-block;

        }

        .box-padding {

            padding: 10px;

        }

</style>

程式執行結果

可以看到每個盒子的距離不變,唯一改變的是被設定padding的6跟7盒子大小發生改變,盒子裡面粉色空間變大了,因為內邊距變大了

我是盒子1
我是盒子2
我是盒子3
我是盒子4
我是盒子5
我是盒子6
我是盒子7
我是盒子8

border 

是盒子上面的邊框大小,可以使元素有邊框效果,還可以改變顏色

呈現方式

先設定全部的盒子都有

  • 背景粉
  • 邊框1px,紅色
  • 高跟寬都100px
  • 設定盒子2、3跟6、7到中間,方便觀察
  • 最後在6、7設定 border 15px,觀看差別

※這裡用到CSS選擇器跟display屬性呈現,可以參考以下文章:

CSS中display的屬性差異

HTML

    <div class=”box”>我是盒子1</div>

    <div class=”box-mid”>我是盒子2</div>

    <div class=”box-mid”>我是盒子3</div>

    <div class=”box”>我是盒子4</div>

    <div class=”box”>我是盒子5</div>

    <div class=”box-mid box-border”>我是盒子6</div>

    <div class=”box-mid box-border”>我是盒子7</div>

    <div class=”box”>我是盒子8</div>

CSS

    <style>

        [class^=”box”] {

            height: 100px;

            width: 100px;

            background: pink;

            border: 1px solid red;

        }

        .box-mid {

            display: inline-block;

        }

        .box-border {

            border: 10px solid red;

        }

 </style>

程式執行結果

可以看到每個盒子的大小跟距離不變,唯一改變的是被設定border15px的6跟7盒子邊框發生改變,盒子邊框紅色部分變大了,因為邊寬變大了

我是盒子1
我是盒子2
我是盒子3
我是盒子4
我是盒子5
我是盒子6
我是盒子7
我是盒子8

發佈留言

發佈留言必須填寫的電子郵件地址不會公開。 必填欄位標示為 *