把块级元素用display：inline设置成内联元素后，同时设置宽高以及pading值出来的效果为什么是这样的？
来源：12-3 我要和你站一起 - 内联元素
Chris_克瑞斯
2016-03-05 16:36
把块级元素<p>用display：inline设置成内联元素后，确实是改变不了元素的宽度，而且两个元素并到了同一行，可为什么高度却可以改变，而且会遮盖住上面的内容
<style type="text/css">
p{
background-color:#F9F;
width:300px;
height:60px;
text-align:center;
padding-top:40px;
display:inline;
}
</style>
<p>1234567890</p>
<p>1234567890398578934</p>
写回答
关注
3回答
-
- 李典秣MM
- 2016-03-05 16:53:05
你想要实现的功能应该用“inline-block”，而不是inline
display:inline-block;
-
- 井人韦
- 2016-03-05 16:51:27
首先你出现这样的情况改变的并不是高度，而是P元素盒模型的上内边距（padding-top）。你样式里面的height：6opx并没有起作用。导致你出现这样的现象是padding-top：4opx。请在仔细看一下什么是盒模型。至于为什么会当着上面的内容，那是因为你把p设置成inline有关的。
-
- likar
- 2016-03-05 16:49:42
display:inline; 表示p已经是行内元素了哦，也就是你现在的width:300px;height:60px;这两个值是无效的，之所以会遮盖住上面的内容是因为padding-top:40px;他的作用效果。
初识HTML(5)+CSS(3)-升级版
HTML(5)+CSS(3)基础教程8小时带领大家步步深入学习标签用法和意义
1225820 学习 · 18235 问题
相似问题