>>分享Web前端开发技术,并对孙卫琴的《精通Vue.js:Web前端开发技术详解》提供技术支持 书籍支持  卫琴直播  品书摘要  在线测试  资源下载  联系我们
发表一个新主题 开启一个新投票 回复文章 您是本文章第 28320 个阅读者 刷新本主题
 * 贴子主题:  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开发-->泛型
  JSP与Hibernate开发-->Web运作原理(Ⅲ)
  Java网络编程-->JSP中使用JavaBean(Ⅱ)
  精通Spring-->持久化层的映射类型
  Vue3开发-->映射对象标识符
  webpack常用插件
  Webpack 插件开发指南
  JS 闭包的 9 大经典使用场景
  axios 发 post 请求,后端接收不到参数的解决方案
  Vue项目PWA化
  JavaScript Promise对象的用法
  vue的CSS过渡和动画范例
  Vue自定义数据验证指令
  vue中axios异步调用接口的坑
  Vue CLI内网安装(禁止运行vue指令解决方案)
  jQuery 添加元素
  CSS 单位
  JavaScript 测试 jQuery
  jQuery Mobile 事件
  Android 广播接收器(Broadcast Receivers)
  更多...
 IPIP: 已设置保密
楼主      
1页 0条记录 当前第1
发表一个新主题 开启一个新投票 回复文章


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