css盒子模型组成:内填充,外边距,边框
内填充padding:
左内填充: padding-left
右内填充: padding-right
上内填充: padding-top
下内填充: padding-bottom
简写:
padding: 30px; -上下左右的内填充都是30px
padding: 20px 50px; 上下20px, 左右50px
padding: 10px 20px 30px 40px; 上右 下左
引发的问题:
内填充会将元素撑大
解决办法:
1、元素的宽度-左右内填充/元素的高度-上下内填充
2、box-sizing: border-box;
外边距margin:
左外边距: margin-left
右外边距: margin-right
上外边距: margin-top
下外边距: margin-bottom
简写:
margin: 30px; 上下左右的外边距都是30px
margin: 20px 50px; 上下20px, 左右50px
margin: 10px 20px 30px 40px; 顺时针上右下左
margin: auto; 上下为0,左右居中
margin: 20px auto; 上下20px,左右居中
引发的问题:
子元素设置上外边距,父元素也会增加上外边距,
解决办法:
1、父元素设置属性,overflow:hidden