CSS 中的每个元素都是一个矩形盒,由四个层组成,从内向外依次为:content、padding、border 和 margin。理解它们如何组合是所有布局的基础。
text
┌─────────────── margin ───────────────┐ ← space OUTSIDE, between elements
│ ┌──────────── border ────────────┐ │
│ │ ┌───────── padding ────────┐ │ │ ← space INSIDE, around content
│ │ │ content │ │ │ ← text/image (width × height)
│ │ └──────────────────────────┘ │ │
│ └─────────────────────────────────┘ │
└────────────────────────────────────────┘
css
{
: ;
: ;
: solid;
: ;
}
