一、padding影响元素尺寸
对于block水平元素
padding值大到一定境界，一定会影响尺寸；
width非auto，padding值会影响尺寸（padding值越大，元素看起来越小）；
width：auto或box-sizing：border-box；同时padding值没有特别的大，不影响尺寸
对于inline水平元素
水平padding会影响尺寸，垂直padding不影响尺寸，但是会影响背景颜色（占据空间变大）
使用这一特性，可以实现高度可控的分割线
复制代码
/*使用inline padding实现 注册 | 退出登录 */
<!--------------HTML代码-------------->
注册<span></span>登录
<!--------------CSS代码-------------->
span{
padding:16px 6px 1px
margin-left:12px
border-left:2px solid
font-size:0
}
复制代码
二、padding的特性
1、padding不支持任何形式的负值
2、padding百分比相对于宽度计算
复制代码
/* block元素实现移动端屏幕题图占一半 */
<div class="container">
<div class="example">
<h2>padding..</h2>
<h3>margin...</h3>
</div>
</div>
<!---------------CSS代码--------------->
.container {
padding:50%//使图片占据移动端屏幕的一半，不用计算各种移动端设备的宽和高
background: url(exp.jpg)
background-size: 100%
position:relatvie
}
.example {
position:absolute
top:0
right:0
bottom:0
left:0
}//文字充满整个屏幕显示
复制代码
3、inline水平元素的padding百分比值
.同样相对于宽度计算
。默认的高度宽度细节有差异
。padding会断行
inline就算是空白元素，padding高和宽也不想等
是因为：inline元素的垂直padding会让“幽灵空白节点”显现，也就是规范中的"strut"出现。
三、标签元素内置padding的使用
1、ol/ul列表
i.ol/ul元素内置padding-left，但是单位是px而不是em；
ii.所以如果字号很小/很大，间距就会很开 （平时开发font-size:是12/14，padding-left:22/25px相对合适）
2、所有浏览器input/textarea输入框内置padding
3、所有浏览器botton按钮内置padding
4、所有浏览器radio/checkbox单复选框无内置padding
5、button按钮元素的padding最难控制!
在不同浏览器上使用不同的padding
i.chrome浏览器 padding:0即可以
ii.FireFox浏览器设置padding:0 左右依然有padding! 可以设置 button:-moz-focus-inner{padding:0}
iii.IE浏览器下 按钮文字越多，左右padding逐渐变大 button{overflow:visible}
padding与高度计算的不兼容
！！！更好的是利用<label>标签模拟按钮，但是有时需要button提交，所以，利用<button>的可用性并可访问性隐藏
IE6下默认的字体尺寸大致在 12 - 14px 之间。
强制定义该 div 的字体尺寸<div id="test1" style=" background-color:#FFCCCCwidth:400pxclear:bothfont-size:0"></div>。
<html>
<head>
<style>
#container{height:100%border:solid 1px redwidth:100%}
#top{margin-top:1pxheight:80pxborder:solid 1px green}
#down{margin-top:1pxheight:89%border:solid 1px silver}
#left{height:100%border:solid 1px blackmargin:1pxwidth:200pxfloat:left}
#right{border:solid 1px #0aamargin:1pxheight:100pxwidth:40px}
</style>
</head>
<body>
<table id='container'>
<tr><td>
<div id='top'></div>
<div id='down'>
<div id='left'></div>
<div id='right'>canHaveHTML 获取表明对象是否可以包含丰富的 HTML 标签的值。
扩展资料：
<div>标签定义 HTML 文档中的分隔（DIVision）或部分（section）。div属于web前端的学习内容，其中<div>标签常用于组合块级元素，以便通过样式表来对这些元素进行格式化。<div>可定义文档中的分区或节（division/section）。
<div>标签可以把文档分割为独立的、不同的部分。它可以用作严格的组织工具，并且不使用任何格式与其关联。如果用 id 或 class 来标记 <div>，那么该标签的作用会变得更加有效。
参考资料来源：百度百科-DIV
