盒子模型 ( Box Model )

网页中所有的元素所产生的容器，都会透过一套标准的“盒子模型 Box Model”来定义容器的“长宽、内边距、边框和外边界”，盒子模型也是网页排版最基础也必备的 CSS 知识，这篇教学会介绍什么是盒子模型、盒子模型的水平对齐和垂直对齐行为。

快速导览：

认识盒子模型 (Box Model )

盒子模型的水平对齐

盒子模型的垂直对齐

CSS 教学 - 容器盒子模型 ( box Model )

教学影片

搭配教学影片一起阅读，效果会更好！欢迎大家订阅 STEAM 教育学习网的 Youtube 频道。

前往：https://www.youtube.com/@steam.oxxostudio

认识盒子模型 (Box Model )

容器的盒子模型的构造如下图所示，从内而外分成：“内容、内边距、边框、外边界”四层。

盒子模型结构	说明	对应样式属性	box-sizing 影响
内容	元素本身呈现的内容。	width 和 height	会
内边距	元素内缘向外延伸到边框的范围。	padding	会
边框	元素边框。	border	会
外边界	元素边框外缘延伸出去的范围。	margin	不会

CSS 教学 - 容器盒子模型 ( box Model ) - 认识盒子模型

盒子模型的水平对齐

当元素本身是“行内容器”类型特性时 ( inline、inline-* )，可以透过 text-align 进行“水平对齐”，对齐时会使用盒子模型的“外边界”作为左右对齐的依据，如果是其他类型元素则需要透过 margin 或自身的样式属性进行水平对齐。

延伸阅读：CSS 文字水平对齐、垂直对齐、CSS 水平置中技巧

CSS 教学 - 容器盒子模型 ( box Model ) - 水平对齐行为

下方的范例将两个 div 改成 display:inline;，并分别设定 margin 为 50px 和 25px 并进行靠左对齐。

线上展示：https://codepen.io/oxxo/pen/mdYKXZa

<!-- HTML 程式碼 -->
<main>
  <span>Good Morning</span>
  <br/>
  <div>oxxo</div>
  <br/>
  <div class="a">apple</div>
</main>

<!-- CSS 程式碼 -->
<style>
  main{
    text-align: left;   /* inline 顯示類型的子元素靠左對齊 */
    font-size: 20px;
  }
  span {background: orange;}
  div {
    display: inline;      /* 將 div 換成 inline 類型 */
    background: pink;
    padding: 20px;
    margin: 50px;
    border: 10px solid #000;
    line-height: 100px;  /* 設定行高避免重疊 */
  }
  .a {
    background:cyan;
    padding: 10px;
    margin: 25px;
    line-height: 100px;  /* 設定行高避免重疊 */
  }
</style>

CSS 教学 - 容器盒子模型 ( box Model ) - 水平左右对齐

进行“水平置中”时，会先计算容器的总宽度，接着透过“总宽度 / 2”计算出中心点的位置进行水平对齐，而总宽度的计算与 box-sizing 的属性值有关，下方列出不同属性值下总宽度的算法：

参考：box-sizing 定义宽高显示方式

inline 显示类型元素无法调整宽高，inline-* 显示类型元素才能调整宽高。

下方的范例可以很明显地看出，两个 div 因为左右 margin 和 padding 数值不同，所以在水平置中对齐时，就会发生偏向左边或右边的状况。

线上展示：https://codepen.io/oxxo/pen/yLWEvmJ

<!-- HTML 程式碼 -->
<main>
  <span>Good Morning</span>
  <br/>
  <div>oxxo</div>
  <br/>
  <div class="a">apple</div>
</main>

<!-- CSS 程式碼 -->
<style>
  main{
    text-align: center;      /* inline 的子元素水平置中 */
    font-size: 20px;
  }
  span {
    background: orange;      /* 將 div 換成 inline 類型 */
  }
  div {
    display: inline;
    background: pink;
    padding: 20px 20px 0 0;  /* 設定上右內邊距為 20px，下左內邊距為 0 */
    margin: 0 50px 0 0;      /* 設定右外邊界為 50px，上下左外邊界為 0 */
    border: 10px solid #000;
    line-height: 100px;
  }
  .a {
    background:cyan;
    padding: 10px 0 0 10px;  /* 設定上左內邊距為 10px，下右內邊距為 0 */
    margin: 0 0 0 25px;      /* 設定左外邊界為 50px，上下右外邊界為 0 */
    line-height: 50px;
  }
</style>

CSS 教学 - 容器盒子模型 ( box Model ) - 水平置中对齐

盒子模型的垂直对齐

当元素本身是“行内或表格容器”类型特性时 ( inline、inline-*、table、table-* )，可以透过 vertical-align 进行“垂直对齐”，对齐时会使用盒子模型的“外边界”作为垂直对齐的依据，如果是其他类型元素则需要透过自身的样式属性，或搭配其他样式属性进行垂直对齐。

延伸阅读：CSS 文字水平对齐、垂直对齐、CSS 垂直置中技巧

CSS 教学 - 容器盒子模型 ( box Model ) - 垂直对齐行为

下方的范例将两个 div 改成 display:inline-block;，并分别用 margin 设定下边界为 20px 和 50px 并进行垂直对齐 ( vertical-align 默认值对齐 baseline )，垂直对齐使用默认值 baseline，过程中在内容加入一个 display 为 block 的 div 凸显内容大小。

线上展示：https://codepen.io/oxxo/pen/mdYKXNa

<!-- HTML 程式碼 -->
<main>
  <span>Good Morning</span>
  <div><div></div> </div>
  <div class="a"><div></div> </div>
</main>

<!-- CSS 程式碼 -->
<style>
  main {font-size: 20px;}
  span {
    background: orange;
  }
  div {
    display: inline-block;  /* 將 div 的顯示類型改成 inline-block */
    background: pink;
    width: 50px;
    height: 50px;
    padding: 20px;
    margin: 0  0 20px 0;   /* 下外邊界為 20px，上左右外邊界為 0 */
    border: 10px solid #000;
  }
  .a {
    background:cyan;
    margin: 0 0 50px 0;   /* 下外邊界為 50px，上左右外邊界為 0 */
  }
  /* 下方是顯示內容大小，跟對齊無關 */
  div div{
    display: block;        /* 內容 div 的顯示類型為 block */
    width: 50px;
    height: 50px;
    padding: 0;           /* 內邊距為 0 */
    margin: 0;            /* 外邊界為 0 */
    border: none;         /* 邊框為 0 */
    background: yellow;
  }
</style>

CSS 教学 - 容器盒子模型 ( box Model ) - 垂直对齐

进行“垂直置中”时，会先计算容器的总高度，接着透过“总高度 / 2”计算出中心点的位置进行垂直对齐，而总高度的计算与 box-sizing 的属性值有关，下方列出不同属性值下总高度的算法：

参考：box-sizing 定义宽高显示方式

inline 显示类型元素无法调整宽高，inline-* 显示类型元素才能调整宽高。

下方的范例可以很明显地看出，两个 div 因为上下 margin 和 padding 数值不同，所以在垂直置中对齐时，就会发生偏向上面或下面的状况。

线上展示：https://codepen.io/oxxo/pen/MWdXVgj

<!-- HTML 程式碼 -->
<main>
  <span>Good Morning</span>
  <div><div></div></div>
  <div class="a"><div></div></div>
  <div class="b"><div></div></div>
</main>

<!-- CSS 程式碼 -->
<style>
  main {font-size: 20px;}
  main * {vertical-align: middle;}  /* main 裡的所有元素都垂直置中對齊 */
  span {background: orange;}
  div {
    display: inline-block;     /* div 的顯示類型為 inline-block */
    background: pink;
    width: 20px;
    height: 50px;
    padding: 20px;
    margin: 0  0 100px 0;      /* 下外邊界為 100px，上左右外邊界為 0 */
    border: 10px solid #000;
  }
  .a {
    background:cyan;
    padding: 10px 20px 0 20px; /* 上內邊距為 10px，左右內邊距為 20px，下內邊距為 0 */
    margin: 50px 0 0 0;        /* 上外邊界為 50px，下左右外邊界為 0 */
  }
  .b {
    background: #0f0;
    margin: 50px 0;            /* 上下外邊界為 50px，左右外邊界為 0 */
  }
  div div{
    display:block;             /* div 裡的 div 的顯示類型為 block */
    width: 20px;
    height: 50px;
    padding: 0;                /* 內邊距為 0 */
    margin: 0;                 /* 外邊界為 0 */
    border: none;              /* 邊框為 0 */
    background: yellow;
  }
</style>

CSS 教学 - 容器盒子模型 ( box Model ) - 垂直置中对齐

不过垂直置中会有一些特殊状况，当垂直置中的元素内容包含“inline”显示类型元素，垂直对齐的“baseline、super、sub”的参考线，就会根据 inline 的参考线进行垂直对齐 ( 参考“vertical-align 垂直对齐”)。

注意，只要出现“文字”，就会自动产生 inline 行内容器。

下方的范例在空白的 div 内容时，会使用 inline-block 的对齐方式对齐 baseline，但当文字出现在 div 里时，垂直对齐的行为就变成对齐文字的 baseline。

线上展示：https://codepen.io/oxxo/pen/mdYKxbv

<!-- HTML 程式碼 -->
<main>
  <span>Good Morning</span>
  <div><div></div></div>
  <div><div>oxxo</div></div>            <!-- 出現文字 -->
  <div class="a"><div></div></div>
  <div class="a"><div>oxxo</div></div>  <!-- 出現文字 -->
</main>

<!-- CSS 程式碼 -->
<style>
  main {font-size: 20px;}
  main * {vertical-align: baseline;}  /* main 裡的所有元素都垂直置中對齊 */
  span {background: orange;}
  div {
    display: inline-block;    /* div 的顯示類型為 inline-block */
    background: pink;
    width: max-content;       /* 讓最大的內容撐滿寬度 */
    height: 100px;
    padding: 20px;
    margin: 0  0 50px 0;      /* 下外邊界為 50px，上左右外邊界為 0 */
    border: 10px solid #000;
  }
  .a {
    background:cyan;
    padding: 10px 20px 0 20px; /* 上內邊距為 10px，左右內邊距為 20px，下內邊距為 0 */
    margin: 50px 0 0 0;        /* 上外邊界為 50px，下左右外邊界為 0 */
  }
  div div{
    display:block;             /* div 裡的 div 的顯示類型為 block */
    background: yellow;
    padding: 0;                /* 內邊距為 0 */
    margin: 0;                 /* 外邊界為 0 */
    border: none;              /* 邊框為 0 */
  }
</style>

CSS 教学 - 容器盒子模型 ( box Model ) - 垂直置中对齐出现文字

小结

容器盒子模型 ( box Model ) 是 CSS 最重要的观念之一，几乎所有的排版和对齐都围绕在盒子模型的观念上打转，透过这篇教学，相信能够深入理解容器盒子模型的运作原理。

意见反馈

CSS 教学

基本介绍

CSS 选择器

数值与单位

规则与定义

函数类型

颜色与滤镜

文字与段落

元素容器

背景与阴影

清单与表格

基本排版与定位

Flex 弹性排版

Grid 网格排版

转场与动画

变形、裁切与遮罩

视窗与用户行为

CSS 预处理器

范例效果

盒子模型 ( Box Model )

教学影片

认识盒子模型 (Box Model )

盒子模型的水平对齐

盒子模型的垂直对齐

小结