欢迎来到DIVCSS5查找CSS资料与学习DIV CSS布局技术!
您的位置:22选5河南最新开奖今 > DIV+CSS基础 >

CSS基础必学列表

DIV CSS padding内补白(内边距)left right top bottom

22选5河南最新开奖今 www.gsf5k.cn DIV CSS padding内补白(内边距)left right top bottom语法应用案例教程

Padding是比较常用22选5河南最新开奖今样式,可以利用padding内边距设置上、下、左、右对象内容与四个边距距离间隔。接下来22选5河南最新开奖今从基础语法到应用示范、简写用法讲解CSS padding样式。

一、padding语法结构与说明   -   TOP

padding : +数值+单位 或 百分比数值

22选5河南最新开奖今{padding:5px}设置对象距离四边边距为5px间隔

同时可以单独设置左、右、上、下边距离发布设置

1、padding-left 设置对象距离左边的边距补白间隔
div{padding-left:5px}
对象内距离左边补白间距为5px

2、padding-right 设置对象距离右边的边距补白间隔
div{padding-right:5px}
对象内距离右边补白间距为5px

3、padding-top 设置对象距离上边的边距补白间隔
div{padding-top:5px}
对象内距离上边补白间距为5px

4、padding-bottom 设置对象距离下边的边距补白间隔
div{padding-bottom:5px}
对象内距离下边补白间距为5px

22选5河南最新开奖今 Padding说明

检索或设置对象四边的补丁边距。
如果提供全部四个参数值,将按上-右-下-左的顺序作用于四边。
如果只提供一个,将用于全部的四条边。
如果提供两个,第一个用于上-下,第二个用于左-右。
如果提供三个,第一个用于上,第二个用于左-右,第三个用于下。
内联对象要使用该属性,必须先设定对象的height或width属性,或者设定position属性为absolute。

Padding的值不能为负值。

css Padding存在示范截图
Padding存在示范截图

Padding位于对象(边框)以内,或这样说padding样式是位于对象内的内容区域与边框之间。

二、padding设置四边用法案例   -   TOP

为了对padding用法进一步了解,我们设置一个对象分别设置4边不同的padding补白间距,并且设置对象CSS宽度,css 高度、CSS边框属性样式。为了便于观察padding存在,我们设置padding-left(左)为20px,padding-right(右)为30px,padding-top(上)为40px,padding-bottom(下)为50px。

1、padding案例CSS代码

  1. <style> 
  2. .divcss5{ width:350px; height:80px; border:1px solid #00F; 
  3. padding-left:20px;padding-right:30px;padding-top:40px;padding-bottom:50px} 
  4. </style> 

2、案例HTML代码

  1. <div class="divcss5">DIVCSS5 padding使用案例</div> 

3、padding用法应用案例截图


padding案例说明图 软件中padding用法示范截图

浏览器中实际效果:

padding样式案例在浏览器测试结果图
padding应用浏览器测试结果图

4、案例小结

padding用于对象内四边边框到内容区域间距设置样式,所以要实现对象内间隔可以使用22选5河南最新开奖今 + padding实现。

三、padding简写与案例   -   TOP

1、四边相同padding简写
如果padding四边设置值相同,假如为5px,原始表达方式:
padding-left:5px;padding-right:5px;padding-top:5px;padding-bottom:5px;

可以CSS简写为:
padding:5px;

2、四边不同padding简写
就像我们第二点教程中四边不同padding值,padding-left:20px;padding-right:30px;padding-top:40px;padding-bottom:50px

我们可以简写为:
Padding:40px 30px 50px 20px;
注意每个数值后一个空格间隔隔开

解释分别意思
第一个40px代表“上”padding-top:40px;
第二个30px代表“右”padding-right:30px;
第三个50px代表“下”padding-bottom:50px;
第四个20px代表“左”padding-left:20px;

图文说明padding简写

div css padding优化缩写说明图
Padding优化缩写分析图

3、左右相同,上下不同值padding简写
假如padding左右为10px,上为20px,下为30px

一般写法:
padding-left:10px;padding-right:10px;padding-top:20px;padding-bottom:30px

简写可以为:
Padding:20px 10px 30px;

前者第一个20px代表padding-top上为20px,
第二个10px,代表padding-left和padding-right左右为10px
第三30px,代表padding-bottom:30px

4、三边相同,一边值不同
任意三边相同值,另外边不同我们仍然可以简写。

EXP
假如padding上左右为10px,下为20px,这个时候一般这样写CSS样式
padding-left:10px;padding-right:10px;padding-top:10px;padding-bottom:20px

简写为:
padding:10px;padding-bottom:20px
注意顺序不能颠倒,这里运用技巧是浏览器读取是从上到下,从左到右读取方式,所以我们可以先设置四边相同,后面加一个另外一边不同样式值即可。

扩展阅读:
1、html压缩优化
2、css压缩优化
3、css优化
4、css字间距

四、padding css总结   -   TOP

Padding样式是我们使用频率比较高的CSS样式属性,一般设置对象内上、下、左、右边距间隔我们就要用到padding,当然如果遇到开头文字缩进我们可以使用css text-indent样式。使用padding时候注意宽度增减,padding是要占用宽度和高度,如果总宽度为500px,左右设置了10px的padding样式,这样内容区域宽度就会变为480px。同时注意缩写PADDING样式时候代表意义,尽量适使用CSS缩写样式节约CSS代码。css padding简单实例。

如需转载,请注明文章出处和来源网址://www.gsf5k.cn/rumen/r418.shtml

我要分享到:

必备CSS教程 Essential CSS Tutorials

必备HTML基础教程 Essential HTML Tutorials

 

如对文章有任何疑问请提交到DIV CSS论坛,或有任何网页制作CSS问题立即到CSS论坛发贴求解 或 直接DIVCSS5网页顶部搜索遇到DIVCSS疑问。
22选5河南最新开奖今文章修订日期:2013-02-22 20:04 原创:22选5河南最新开奖今
本文22选5河南最新开奖今 www.gsf5k.cn DIVCSS5版权所有。

  • 其实啊也不奇怪,菜做好了先来一份尝尝味道于是提前开吃了。 2019-01-19
  • 承认私有制存在,却否认阶级分析。睁着眼睛说瞎话,强坛独一份。 2019-01-19
  • 广东院士联合会:“新起点”开启助力广东创新驱动发展“新征程” 2019-01-18
  • 寻找把他吃剩的饭菜找包后,丢给四两吃,这能算道德?[微笑] 2019-01-18
  • 长治市争创全国禁毒示范城市 2019-01-18
  • 21世纪中国的马克思主义 2019-01-18
  • 6月温州市区普通商品住房地块集中出让 2019-01-17
  • 中国动力电池市场竞争加剧 70家公司仅占3成份额 2019-01-17
  • 儿童版《流星花园》?胡可晒安吉小鱼儿与七宝合影 2019-01-17
  • 6个关键词 教你读懂最新癌症预防报告 2019-01-16
  • 嘱望上合 青岛之约 2019-01-16
  • 勤劳的女人最美丽 河南温县“农家女”创业带富乡邻 2019-01-16
  • 增强“四个意识”做政治上的明白人 2019-01-15
  • 郪江,隐藏在川东丘陵中的战国小镇文章中国国家地理网 2019-01-15
  • 第六届(2017)赛迪学术年会系统测评分论坛举办 2019-01-15
  • 901| 89| 437| 829| 132| 427| 749| 504| 671| 402|