>>分享Web前端开发技术,并对孙卫琴的《精通Vue.js:Web前端开发技术详解》提供技术支持 书籍支持  卫琴直播  品书摘要  在线测试  资源下载  联系我们
发表一个新主题 开启一个新投票 回复文章 您是本文章第 29506 个阅读者 刷新本主题
 * 贴子主题:  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面向对象编程-->Lambda表达式
  JavaWeb开发-->Web运作原理(Ⅳ)
  JSP与Hibernate开发-->数据库事务的概念和声明
  Java网络编程-->通过JDBC API访问数据库
  精通Spring-->创建综合购物网站应用
  Vue3开发-->Vue简介
  webpack常用插件
  vue3-Composition-API的用法
  介绍axios的基本使用(vue中使用axios)
  JavaScript输出格式化日期和时间
  深入理解Vue的响应式系统
  vue中axios异步调用接口的坑
  Vue CLI内网安装(禁止运行vue指令解决方案)
  js导出json文件
  JavaScript中的HTML DOM Button 对象
  JavaScript Array 对象
  jQuery UI 如何使用部件库
  CSS3 文本效果
  CSS 网页布局
  HTML中插入脚本的用法
  JavaScript 正则表达式
  更多...
 IPIP: 已设置保密
楼主      
1页 0条记录 当前第1
发表一个新主题 开启一个新投票 回复文章


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