CSS盒子模型

本文记录WEB前端学习过程中遇到的CSS盒子模型~

CSS盒子模型(Box Model)规定了元素框处理内容、内边距、边框和外边距的方式。

1.内边距:padding;

让所有h1元素的各边都有10px的内边距:

h1{padding: 10px;}

按照上右下左的顺序分别设置各边的内边距(可以使用不同的单位或百分比值):

h1{padding: 10px 0.25em 2ex 20%;}

单边内边距属性:

  • padding-top;
  • padding-right;
  • padding-bottom;
  • padding-left。

2.边框:border

  • border-top-style;
  • border-right-style;
  • border-bottom-style;
  • border-left-style。

3.外边距:margin

  • margin-top;
  • margin-right;
  • margin-bottom;
  • margin-left。

标签: none