                        课程
                    
                        /前端开发
                        
                            /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>

Chris_克瑞斯

2016-03-05

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

关注问题我要回答

3256

操作

收起

3 回答

李典秣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 回复有任何疑惑可以回复我~

查看3条回复

likar
2016-03-05

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

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

举报

0/150

提交

取消

初识HTML(5)+CSS(3)-升级版

参与学习 1225792 人
解答问题 18234 个

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

本课相似问答

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

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

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

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

2 回答块级元素的设置

搜索更多本课相关问答

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

我要回答关注问题

意见反馈帮助中心 APP下载