>>分享Web前端开发技术,并对孙卫琴的《精通Vue.js:Web前端开发技术详解》提供技术支持 书籍支持  卫琴直播  品书摘要  在线测试  资源下载  联系我们
发表一个新主题 开启一个新投票 回复文章 您是本文章第 20998 个阅读者 刷新本主题
 * 贴子主题:  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-->通过Axios访问服务器
  Vue3开发-->计算属性和数据监听
  10个 Web 开发人员的常用的 Chrome 扩展程序
  好消息:《精通Vue.js:Web前端开发技术详解》出版了!
  常用CSS样式属性大全
  JS中==和===的区别
  介绍axios的基本使用(vue中使用axios)
  vue的CSS过渡和动画范例
  JavaScript的async函数
  把99%的程序员烤得外焦里嫩的JavaScript面试题
  vue-min-picker普通选择器,日期选择器,省市区选择器,适用...
  vue实现Word或Excel文档导出的功能,转换文件名乱码或者json...
  H5定位终极解决方案
  JavaScript中的HTML DOM Label 对象
  JavaScript 正则表达式RegExp 对象
  JavaScript Date 对象
  CSS 表单的用法
  更多...
 IPIP: 已设置保密
树形列表:   
1页 0条记录 当前第1
发表一个新主题 开启一个新投票 回复文章


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