ITPub博客

首页 > IT职业 > IT职场 > CSS 框模型 element、width、height、border

CSS 框模型 element、width、height、border

IT职场 作者:xduu 时间:2021-09-09 09:51:46 0 删除 编辑

CSS 框模型 (Box Model) 规定了元素框处理元素内容、内边距、边框 和 外边距 的方式。
元素框的最内部分是实际的内容,直接包围内容的是内边距。内边距呈现了元素的背景。内边距的边缘是边框。边框以外是外边距,外边距默认是透明的,因此不会遮挡其后的任何元素。

element : 元素。
padding : 内边距,也有资料将其翻译为填充。
border : 边框。
margin : 外边距,也有资料将其翻译为空白或空白边。

padding分别设置上、右、下、左内边距:
| padding | 简写属性。作用是在一个声明中设置元素的所内边距属性。
| padding-bottom | 设置元素的下内边距。
| padding-left | 设置元素的左内边距。
| padding-right | 设置元素的右内边距。
| padding-top | 设置元素的上内边距。
margin分别设置上、右、下、左外边距:
margin-top
margin-right
margin-bottom
margin-left

CSS border 围绕元素内容和内边据的一条或多条,属性允许你规定元素边框的样式、宽度和颜色。
border-top-style
border-right-style
border-bottom-style
border-left-style

border-top-width
border-right-width
border-bottom-width
border-left-width

border-top-color
border-right-color
border-bottom-color
border-left-color

图片描述

width、height、padding、margin、border区别


图片描述

width、height、padding、margin、border区别



作者:Left左
链接:https://www.jianshu.com/p/28bebacfc761


来自 “ ITPUB博客 ” ,链接:https://blog.itpub.net/2195/viewspace-2813606/ ,如需转载,请注明出处,否则将追究法律责任。

请登录后发表评论 登录
全部评论

注册时间:2019-04-16

  • 博文量
    84
  • 访问量
    1000