一、内边距
1.padding属性
2.padding属性的简写
二、外边距
1.margin属性
2.应用—让块级盒子水平居中对齐
注意:以上方法是让块级元素水平居中,行内元素或者行内块元素水平居中需要给其父元素添加text-algin:center 即可
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> .header { width: 900px; height: 200px; background-color: pink; margin: 0 auto; text-align: center; /* 行内元素或者行内块元素水平居中 */ } </style> </head> <body> <div class="header"> <span>里面的文字</span> </div> </body> </html>
![]()
三、嵌套块元素垂直外边距的塌陷
1.对于两个嵌套关系(父子关系)的块元素,父元素有上外边距的同时,子元素也有上外边距,此时父元素会塌陷较大的外边距值
同时我希望子元素离父元素上边距是100px,代码如下:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> .father { width: 400px; height: 400px; background-color: blue; margin-top: 50px; } .son { width: 200px; height: 200px; background-color: pink; margin-top: 100px; /* *** */ } </style> </head> <body> <div class="father"> <div class="son"></div> </div> </body> </html>
but结果却是这样子
解决办法:
(1)可以为父元素定义上边框
(2)可以为父元素定义上内边距
(3)可以为父元素添加overflow: hidden
第一种 <style> .father { width: 400px; height: 400px; background-color: blue; margin-top: 50px; border: 1px solid transparent; /* transparent 透明的 */ } </style> 第二种 <style> .father { width: 400px; height: 400px; background-color: blue; margin-top: 50px; padding: 1px; } </style> 第三种 <style> .father { width: 400px; height: 400px; background-color: blue; margin-top: 50px; overflow: hidden; } </style>