为了账号安全，请及时绑定邮箱和手机立即绑定

课程

/前端开发

/HTML/CSS

/初识HTML(5)+CSS(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://img1.sycdn.imooc.com//56da9a84000193da04820396.jpg


Chris_克瑞斯

2016-03-05

源自：初识HTML(5)+CSS(3)-升级版  12-3

关注问题 我要回答
3169
操作
收起

正在回答

4 回答

李典秣MM
2016-03-05

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

 display:inline-block;


1 回复 有任何疑惑可以回复我~
收起回答
井人韦
2016-03-05

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

0 回复 有任何疑惑可以回复我~
收起回答
#1

井人韦

http://harttle.com/2015/05/28/css-display.html 具体可以参考这个
2016-03-05 回复 有任何疑惑可以回复我~
#2

Chris_克瑞斯 提问者 回复 井人韦

恩，根据课程上讲解的，内联元素的宽高是不起作用的，我就实验了一把，那为什么padding-top却起了作用，padding-top应该是距离上一个内容40px，可是效果显示却是这40px覆盖掉了上一个内容
2016-03-05 回复 有任何疑惑可以回复我~
#3

Chris_克瑞斯 提问者

而且我把<p>转换成内联元素后，给它加了一个<div>的盒子，继续给<p>加上padding-top值后，还是会覆盖掉上一个内容，而不是距离盒子40px，我就想知道，为什么padding值起了作用，但这个作用效果并不正确，谢谢啦！
2016-03-05 回复 有任何疑惑可以回复我~
#4

井人韦 回复 Chris_克瑞斯 提问者

首先padding-top跟height是不一样的。前者是作用于整个元素盒模型，后者作用于盒模型的内容。你自己再看一次盒模型吧，或者google一下，最好上w3c看一看，我在这里解释太麻烦也不直观。再者，关于为什么会被挡着，我上面留言的网址里面有说到，但不太详尽。
2016-03-05 回复 有任何疑惑可以回复我~
#5

井人韦 回复 井人韦

40px，margin在前端里面是外边距的意思。
2016-03-05 回复 有任何疑惑可以回复我~
查看3条回复
likar
2016-03-05

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

0 回复 有任何疑惑可以回复我~
收起回答

举报

0/150
提交
取消
初识HTML(5)+CSS(3)-升级版
  • 参与学习       1222161    人
  • 解答问题       18206    个

HTML(5)+CSS(3)基础教程8小时带领大家步步深入学习标签用法和意义

进入课程

本课相似问答

3 回答把内联元素设置为块元素的问题

4 回答关于把内联元素设置成内联块状元素的问题

3 回答将内联元素span设置为内联块级元素之后，还是无法改变它的宽度和高度

1 回答请问一下，怎么把块状元素设置成内联元素

2 回答块级元素的设置
搜索更多本课相关问答

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

我要回答 关注问题
意见反馈 帮助中心 APP下载
官方微信