问答详情
源自：12-3 我要和你站一起 - 内联元素

把块级元素用display：inline设置成内联元素后，同时设置宽高以及pading值出来的效果为什么是这样的？

把块级元素<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>

http://img.mukewang.com/56da9a84000193da04820396.jpg


提问者：Chris_克瑞斯 2016-03-05 16:36

个回答

  • 李典秣MM
    2016-03-05 16:53:05

    你想要实现的功能应该用“inline-block”，而不是inline

     display:inline-block;


    1
  • 井人韦
    2016-03-05 16:51:27

    首先你出现这样的情况改变的并不是高度，而是P元素盒模型的上内边距（padding-top）。你样式里面的height：6opx并没有起作用。导致你出现这样的现象是padding-top：4opx。请在仔细看一下什么是盒模型。至于为什么会当着上面的内容，那是因为你把p设置成inline有关的。

    0
  • likar
    2016-03-05 16:49:42

    display:inline; 表示p已经是行内元素了哦，也就是你现在的width:300px;height:60px;这两个值是无效的，之所以会遮盖住上面的内容是因为padding-top:40px;他的作用效果。

    0