Question

css内边距四个属性值的问题

<div><p>asdfasf</p></div>
如上一个简单的HTML代码, 如果在css中,我设置
div{width:400px;}
p{
padding-top: 10px;
padding-right: 0.25em;
padding-bottom: 2ex;
padding-left: 20%;
}
我想问的是,这写padding是怎么同时满足的呢? 也就是 怎么可能 上边距刚好是10px,右边距是0,25em,下边距是2ex,左内边距是20%

Answer 1

你好，padding属性是用来定义内边距的。每个边的padding值的单位可以不一样啊，只要是一个合法的长度单位就可以了。我根据你的代码画了一个图，请看：

明白了吗？

如还有疑惑可以继续追问，很高兴与你交流。

追问

如果说 div 宽和高很大, 而里面的p 宽高很小, 当p满足 padding-top: 2px, padding-right:10px的时候(这时候p块应该是靠近外边div的右边,而这时候p元素左边和下边会因为留一大片空白), 那么这时候又怎么能满足padding-left:12px; padding-bottom:15px;呢

追答

PS：听你的描述似乎你用错属性了……你想说的似乎是“<div>和<p>之间的间距”吧……如果是这个意思那你应该用p{margin:XXXXXX}或者div{padding:XXXXX}。

你在追问中的意思是想说如果出现了冲突会怎么样吗。一般<p>的宽度默认就是“尽可能的宽”，而<p>的高度默认是会根据里面包含的内容长度来自动调整的，如果你故意把<p>做得很小很小并且固定了它的大小，那显然不可能同时满足所有边距……从几何上想想这就是矛盾的嘛……此时它会优先靠左、靠上。那么右边、下边的边框就不能满足。

<div><p>abc</p></div>
<style>
div {background:#aaa; /*把<div>定义灰色背景方便观察*/
     width:400px;
     height:500px; /*把<div>拉得很高*/
     padding-top: 10px;
     padding-right: 0.25em;
     padding-bottom: 2ex;
     padding-left: 20%;}
p {border:solid 1px #f00;width:20px;} /*给<p>加上红色边框方便观察，并限制<p>的宽度在20px*/
</style>

运行效果：

看到了吗，会按照我们书写文字的习惯一样，优先从左、上方开始排列，如果<p>很小，那么右边和下边的间距就只能留出来了。

Answer 2

没有问题呀，只是单位不一样而已，和统一单位了之后的内边距是一样的
px像素
em一个字体的尺寸
ex一个字体的x-height
%比例，系统将自动换算成px

Answer 3

样式里面padding只是说满足时距离各边位置，比如你的定义如果外边框不满足，那么外边框自己样式不变，内边框先满足距左和距上，会造成右边和下边超出外边框，这个是不影响的，因为样式定义里面没说内层一定要小于外层，比如你定义外层width：10px；height：10px；那么内层照样可以定义width：100px；height：200px；

css是允许内层大于外层的，
还有你如果想让内层大于外层时不超出，边距用margin定义，padding和margin是两种不同判断标准

追问

也就是说,如果我有一个div 宽和高很大, 里面子元素 p 宽高很小, 当p满足 padding-top: 2px, padding-left:10px的时候(这时候p块应该是靠近外边div的右边,而这时候p元素左边和下边会因为留一大片空白), padding-right:12px; padding-bottom:15px 就不会满足了. 对吗

追答

对，前提是你没加float:right(浮动靠右)，你在不加靠右浮动的时候就会先判断左和上，左和上满足就行，右和下就是对下一个div有效了，如果没有下一个div那么就无效

追问

sry, man, I didn't select your answer as best one, but your answer is very helpful, thanks again.
wish u luck! best regards!