css内外边距属性

盒子模型:

所有HTML元素可以看作盒子,在CSS中,"box model"是用来设计和布局时 使用。

CSS盒模型本质上是一个盒子, 封装周围的HTML元素, 它包括:边距,边框,填充和实际内容。

外边距属性:设置对象四边的外部边距

css内外边距属性

  • 内联块级元素和块级元素的可以设置外边距。
  • 内联元素可以设置左、右两边的外边距;若要设置上、下两边的外边距,必须先使该元素变为块级元素或内联块级元素。
  • 如果提供全部四个参数值,将按上、右、下、左的顺序作用于四边。
  • 如果提供两个,第一个用于上、下,第二个用于左、右。
  • 如果提供三个,第一个用于上,第二个用于左、右,第三个用于下。

内边距属性:设置对象四边的外部边距

css内外边距属性

  • 设置内联块级元素和块级元素的内边距。
  • 行内元素可以设置左、右两边的内边距;若要设置上、下两边的内边距,必须先使该元素变为块级或内联块级元素。
  • 改变padding的值,就改变了content的大小
  • 而改变margin的值,则不改变content的大小
 <style type="text/css">
#container{
border: 2px black solid;
width: 700px;
height: 800px;
}
#child{
border: 2px black solid;
width: 400px;
height: 400px;
margin: 100px auto;/* 设置外边距 */
padding: 100px;/* 设置内边距 */
}
</style>
</head>
<body> <div id="container">
<div id="child">div1</div>
</div>
</body>
上一篇:css - 盒子内外边距


下一篇:0019 盒子模型(CSS重点):边框、内外边距、布局稳定性、PS