您的位置:内蒙古11选五开奖5号的 > DIV CSS基础 > 正文

内蒙古11选5最大遗漏:padding【CSS内边距】 属性图文教程

ThinkCSS为大家介绍padding属性从基本语法结构,到padding代码简写缩写,再到padding属性样式应用实例全方位介绍padding属性,让大家掌握padding。

内蒙古11选五开奖5号的布局之CSS padding 属性样式图文教程篇。margin设置边框外对象与对象间距距离,padding设置边框边缘到内容间距距离。

在网页布局中padding也是常用的CSS属性样式,其语法用法也是非常简单,但掌握padding并灵活应用可以布局出各式各样所需效果样式。

一、CSS padding语法与结构

1、paddin语法:
padding : length

2、padding值介绍:
length : 由浮点数字和单位标识符组成的长度值 | 或者百分数。百分数是基于父对象的宽度。

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

4、padding分析图

css padding值分析图
padding值分析图

5、padding示例:

body { padding: 36pt 24pt 36pt; }  

/*上padding-top:36px,padding-right:24pt,padding-left:24pt,padding-bottom:36pt*/

body { padding: 11.5%; }  

/* 代表 上下左右padding均为11.5% */

body { padding: 5px 10px 15px 20px; } 

/* 代表 padding的上为5px,右为10px,下为15px,左为20px */

二、padding功能介绍

padding是设置对象内容与边框之间距离的属性。常常用于设置内容到对象盒子边缘之间距离。

padding存在对比图
padding存在对比图

三、CSS padding上下左右单独设置

1、单独设置左边padding
padding-left:10px

2、单独设置右边padding
padding-right:9px

3、单独设置上边padding
padding-top:11px

4、单独设置下边padding
padding-bottom:20px

四、padding代码简写

1、padding四边相同值简写
padding-left:10px;padding-right:10px;padding-top:10px;padding-bottom:10px
简写为:
padding:10px

2、上下相同、左右相同的简写
padding-left:10px;padding-right:10px;padding-top:20px;padding-bottom:20px
简写为:
padding:10px 20px

3、上下不同,左右相同
padding-left:10px;padding-right:10px;padding-top:5px;padding-bottom:15px
简写为:
padding:5px 10px 15px

五、padding实例

这里设置一个DIV盒子,给予设置固定CSS宽度,为了观察到padding效果,我们再对其设置CSS边框样式。

1、padding属性实例完整HTML+内蒙古11选五开奖5号的代码:

<!DOCTYPE html> 
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>padding实例</title>
<style>
.exp{ width:200px;padding:5px 10px 15px 20px; border:1px solid #F00}
.exp-no{ width:200px; border:1px solid #00F}
</style>
</head>
<body>
<div class="exp">ThinkCSS测试内容padding应用效果实例</div>
<div class="exp-no">ThinkCSS测试内容为没有设置padding</div>
</body>
</html>

分别设置padding-top:5px;padding-right:10px;padding-bottom:15px;padding-left:20px

2、padding实例效果截图

padding样式使用实例截图
padding样式使用实例截图

六、padding总结

padding属性样式设置不管对象是否设置边框均是这个功能,padding设置对象边缘到内容之间的距离。当然设置padding后同样会占用宽度和高度。设置上或下padding,那么高度就会相应增加,设置左或右padding,那么宽度也会相应增加。

相关标签: padding
如需转载,请注明文章出处和来源网址:www.thinkcss.com/css/984.shtml

日期:2016-07-29 19:56:04 来源:内蒙古11选五开奖5号的 www.phlmy.com 作者:ThinkCSS
  • 图解:从中国新闻奖、长江韬奋奖看人民日报70年 2019-06-27
  • 江夏区宣传干部培训班圆满落幕 荆楚网携手江夏区委宣传部举办 2019-06-26
  • 供应链如何更“智慧” 2019-06-17
  • 推动民营企业创新发展 2019-05-31
  • 【北京中汽双会车型报价】北京中汽双会4S店车型价格 2019-05-31
  • 弘扬光荣传统 勇立时代潮头 忠实履职尽责 2019-05-30
  • 世界很多国家想拥有核弹,但迫于种种原因而没能实现。 2019-05-25
  • 阿呆,那是你家远祖啊,还不跪拜?[哈哈] 2019-05-15
  • 泰国推出“智慧签证”吸引人才 2019-05-15
  • “印象”世界杯:揭幕战红色风暴席卷绿茵场 2019-04-29
  • 衡阳日报社副社长周卫国祝贺人民日报创刊70周年 2019-04-27
  • 国乒在日本全面溃败!刘国梁却在参加综艺节目 2019-04-21
  • 张琳芃球衣事件折射中超不职业 因打亚冠要多道程序 2019-04-21
  • 出租广州市番禺区大龙街东兴路476号4楼物业空置部分 2019-04-17
  • 美媒盘点地球上最强5款战略核潜艇:毁灭世界比外卖都快 2019-04-17
  • pc蛋蛋游戏试玩平台pc蛋蛋游 江苏e球彩半全场 凤凰一波中特一肖一码 香港赛马会赛马派彩 体彩福建22选5开奖结果查询 新疆十一选五开奖结果 23号黑龙江十一选五开奖结果 足彩计算器胜平负玩负 辽宁十一选五遗漏号码 蓝22公式反排序 p3试机号近10期 110期小龙女心水论坛 山东11选5是传销吗 四不像一肖中特 香港赛马会官网资料