css内外边距属性

时间 2019-11-12

标签 css 内外边距属性栏目 CSS 繁體版

原文原文链接

盒子模型： css

全部HTML元素能够看做盒子,在CSS中，"box model"是用来设计和布局时使用。布局

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

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

内联块级元素和块级元素的能够设置外边距。
内联元素能够设置左、右两边的外边距；若要设置上、下两边的外边距，必须先使该元素变为块级元素或内联块级元素。
若是提供所有四个参数值，将按上、右、下、左的顺序做用于四边。
若是提供两个，第一个用于上、下，第二个用于左、右。
若是提供三个，第一个用于上，第二个用于左、右，第三个用于下。

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

设置内联块级元素和块级元素的内边距。
行内元素能够设置左、右两边的内边距；若要设置上、下两边的内边距，必须先使该元素变为块级或内联块级元素。
改变padding的值，就改变了content的大小
而改变margin的值，则不改变content的大小

 1 <style type="text/css">
 2     #container{
 3         border: 2px black solid;
 4         width: 700px;
 5         height: 800px;
 6     }
 7     #child{
 8         border: 2px black solid;
 9         width: 400px;
10         height: 400px;
11         margin: 100px auto;/* 设置外边距 */
12         padding: 100px;/* 设置内边距 */
13     }
14 </style>
15 </head>
16 <body>
17     
18     <div id="container">
19         <div id="child">div1</div>
20     </div>
21 </body>