---
# System prepended metadata

title: <font class="h2">盒模型概念Box Ｍodel</font>
tags: [css]

---

# <font class="h2">盒模型概念Box Ｍodel</font>
###### tags: `css`
<style>
.h2 {
  background: linear-gradient(135deg,#fff,#537479) ;
  color: #537479;
  display:block;
  padding: 6px 5px;
  border-radius: 4px;
}
.h3 {
  color: #537479;
  display:block;
  padding: 6px 5px;
  border-bottom: 3px solid #537479;
}
.h4 {
  color: #537479;
  font-weight:bold;
  font-size:1.1em;
}
</style>


![](https://i.imgur.com/Wv66XvD.jpg)

一個區塊元素或者任何的html標籤，不論是div、p、span、a標籤，它都一定會有涵蓋自己的實際寬高、padding 、border、margin。

![](https://i.imgur.com/D1wHcR0.jpg)

:::info
在網頁空間上margin會佔空間，但不影響它本身寬高，只有padding、border會影響本身寬高
:::