最新消息:关注【太平洋学习网】微信公众号,可以获取全套资料,【全套Java基础27天】【JavaEE就业视频4个月】【Android就业视频4个月】

css padding介绍和使用教程

JS/CSS 太平洋学习网 浏览 评论

CSS Padding介绍

css_padding.jpg

CSSpadding属性用于在任何已定义的边框内围绕元素内容生成空间。

使用CSS,您可以完全控制填充,有用于设置元素每一侧(顶部、右侧、底部和左侧)的填充的属性。

CSS Padding具有用于指定元素每一侧的填充的属性:

  • padding-top

  • padding-right

  • padding-bottom

  • padding-left

所有填充属性都可以具有以下值:

  • length - 以 px、pt、cm 等为单位指定填充。

  • % - 以包含元素宽度的 % 指定填充

  • inherit - 指定填充应该从父元素继承

下面是使用例,为 <div> 元素的所有四个边设置不同的填充:

div {
  padding-top: 50px;
  padding-right: 30px;
  padding-bottom: 50px;
  padding-left: 80px;
}

CSS Padding不同个数值代表的意思介绍与使用

CSS Padding四个值代表的意思:

padding: 25px 50px 75px 100px;

  • 顶部内边距为 25px

  • 右内边距为 50px

  • 底部内边距为 75px

  • 左边距为 100px

css padding四个值使用示例:

div {
  padding: 25px 50px 75px 100px;
}

CSS Padding三个值代表的意思:

padding: 25px 50px 75px;

  • 顶部内边距为 25px

  • 左右内边距为 50px

  • 底部内边距为 75px  

css padding三个值使用示例:

div {
  padding: 25px 50px 75px;
}

CSS Padding两个值代表的意思:

padding: 25px 50px;

  • 顶部和底部填充是 25px

  • 左右内边距为 50px


css padding两个值使用示例:

div {
  padding: 25px 50px;
}

CSS Padding一个值代表的意思:

padding: 25px;

  • 所有四个填充都是 25px


css padding一个值使用示例:

div {
  padding: 25px;
}
来源网站:太平洋学习网,转载请注明出处:http://www.tpyyes.com/a/js_css/1202.html
"文章很值,打赏犒劳作者一下"
微信号: Javaweb_engineer

打赏

取消

感谢您的支持,我会继续努力的!

扫码支持
扫码打赏,你说多少就多少

打开支付宝扫一扫,即可进行扫码打赏哦

与本文相关的文章

发表我的评论
取消评论

表情

您的回复是我们的动力!

  • 昵称 (必填)

网友最新评论