内边距padding
padding为内填充:当设置了padding值后,容器的大小会被撑大
padding有四个方向:上 右 下 左(顺时针)
可以单独设置某个方向上的padding值:
padding-top
padding-right
padding-bottom
padding-left
复合样式:padding:top right bottom left
当padding的值为四个值时则分别表示上、右、下、左的值
当padding的值为三个值时表示上,左右的值相同,下
当padding的值为两个值时则表示上下,左右的值,两两相同
当padding的值为一个值时则表示四个方向都为同一个值
外边距margin(与padding相似的语法)
margin有四个方向:上 右 下 左(顺时针)
可以单独设置某个方向上的margin值:
margin-top
margin-right
margin-bottom
margin-left
复合样式:margin:top right bottom left
当margin的值为四个值时则分别表示上、右、下、左的值
当margin的值为三个值时表示上,左右的值相同,下
当margin的值为两个值时则表示上下,左右的值,两两相同
当margin的值为一个值时则表示四个方向都为同一个值
margin的问题:
1.margin-top传递问题(父子级包含的时候,子级的margin-top会传递给父级)
解决:父级加边框
2.div的上下边距重叠(当上面div设置了margin-bottom,下面的div设置了margin-top,理想情况是两div之间的距离为margin-bottom+margin-top,但实际上存在叠压问题)。
解决:用margin给其中一个div设置单独的样式,设置为预想的值(当有两个不同的值时,取最大值)
盒模型
盒子的大小:border+padding+width/height
高度:2border+2padding+margin+width
宽度:2border+2padding+margin+height
盒模型
最后编辑于 :
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。