>>分享Web前端开发技术,并对孙卫琴的《精通Vue.js:Web前端开发技术详解》提供技术支持 书籍支持  卫琴直播  品书摘要  在线测试  资源下载  联系我们
发表一个新主题 开启一个新投票 回复文章 您是本文章第 28751 个阅读者 刷新本主题
 * 贴子主题:  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面向对象编程-->Java常用类(下)
  JavaWeb开发-->JSP中使用JavaBean(Ⅱ)
  JSP与Hibernate开发-->域对象在持久化层的四种状态
  Java网络编程-->通过JavaMail API收发邮件
  精通Spring-->
  Vue3开发-->计算属性和数据监听
  聊聊Nodejs中的模块化和事件循环
  vue-resource和axios的变迁
  Vue2.0与Vue3.0主要区别总结
  Axios拦截器的用法
  JavaScript Promise对象的用法
  Vue CLI内网安装(禁止运行vue指令解决方案)
  Vue.js学习笔记-基础部分+完整实现代码
  vue+file-saver+jszip实现批量导出图片
  JavaScript的HTML DOM td / th 对象
  Javascript DOM封装方法汇总
  jQuery UI 范例:show()方法
  CSS 网页布局
  CSS Border(边框)
  HTML中插入脚本的用法
  JavaScript的window.screen对象
  更多...
 IPIP: 已设置保密
楼主      
1页 0条记录 当前第1
发表一个新主题 开启一个新投票 回复文章


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