>>分享Web前端开发技术,并对孙卫琴的《精通Vue.js:Web前端开发技术详解》提供技术支持 书籍支持  卫琴直播  品书摘要  在线测试  资源下载  联系我们
发表一个新主题 开启一个新投票 回复文章 您是本文章第 21239 个阅读者 刷新本主题
 * 贴子主题:  CSS padding(填充) 回复文章 点赞(0)  收藏  
作者:flybird    发表时间:2019-08-19 13:52:44     消息  查看  搜索  好友  邮件  复制  引用

  

CSS  padding(填充)

       CSS padding(填充)是一个简写属性,定义元素边框与元素内容之间的空间,即上下左右的内边距。      

padding(填充)

       当元素的 padding(填充)内边距被清除时,所释放的区域将会受到元素背景颜色的填充。

       单独使用 padding 属性可以改变上下左右的填充。

       点击在新窗口中浏览原图
CTRL+鼠标滚轮放大或缩小      

可能的值

说明
length 定义一个固定的填充(像素, pt, em,等)
% 使用百分比值定义一个填充
    

填充- 单边内边距属性

     在CSS中,它可以指定不同的侧面不同的填充:            

范例

    padding-top:25px;

    padding-bottom:25px;

    padding-right:50px;

    padding-left:50px;        
  • 上内边距是 25px
  • 右内边距是 50px
  • 下内边距是 25px
  • 左内边距是 50px

填充 - 简写属性

     为了缩短代码,它可以在一个属性中指定的所有填充属性。

         这就是所谓的简写属性。所有的填充属性的简写属性是  padding :            

范例

         padding:25px 50px;


         Padding属性,可以有一到四个值。

           padding:25px 50px 75px 100px;    
  • 上填充为25px
  • 右填充为50px
  • 下填充为75px
  • 左填充为100px
       padding:25px 50px 75px;    
  • 上填充为25px
  • 左右填充为50px
  • 下填充为75px
       padding:25px 50px;    
  • 上下填充为25px
  • 左右填充为50px
       padding:25px;    
  • 所有的填充都是25px

所有的CSS填充属性

  
属性 说明
padding 使用简写属性设置在一个声明中的所有填充属性
padding-bottom 设置元素的底部填充
padding-left 设置元素的左部填充
padding-right 设置元素的右部填充
padding-top 设置元素的顶部填充




程序猿的技术大观园:www.javathinker.net



[这个贴子最后由 flybird 在 2020-02-12 09:48:52 重新编辑]
  Java面向对象编程-->数据类型
  JavaWeb开发-->使用Session(Ⅱ)
  JSP与Hibernate开发-->Java应用分层架构及软件模型
  Java网络编程-->用Swing组件展示HTML文档
  精通Spring-->创建综合购物网站应用
  Vue3开发-->绑定CSS样式
  键盘按键与 键码对照表
  Webpack 插件开发指南
  Vue3.0 ref、reactive、toRef、toRefs、customRef的区别
  Vue2.0与Vue3.0主要区别总结
  Axios拦截器的用法
  vue中axios异步调用接口的坑
  Vue路由开启keep-alive时的注意点
  Vue的使用方法
  一看就懂得移动端rem布局、rem如何换算
  HTML DOM Li 对象
  JavaScript的HTML DOM Input Search 对象
  JavaScript的HTML DOM Column 对象
  JavaScript 正则表达式RegExp 对象
  JavaScript Array 对象
  DTD - XML 构建模块
  更多...
 IPIP: 已设置保密
楼主      
1页 0条记录 当前第1
发表一个新主题 开启一个新投票 回复文章


中文版权所有: JavaThinker技术网站 Copyright 2016-2026 沪ICP备16029593号-2
荟萃Java程序员智慧的结晶,分享交流Java前沿技术。  联系我们
如有技术文章涉及侵权,请与本站管理员联系。