关于span和div
请问一下下面的代码padding设置的都是一样的，显示的高度为什么不一样？<!doctype html>
<html>
<head>
<title>div测试</title>
<meta charset="utf-8" />
<style>
.float-ele
{
padding: 100px;
background: #ff6a00;
width: 100px;
text-align: center;
}
.div-ele
{
padding: 100px;
background: blue;
width: 100px;
text-align: center;
}
</style>
</head>
<body>
<span class="float-ele"></span>
<div class="div-ele"></div>
</body>
</html> 本帖最后由 不二如是 于 2019-4-13 10:33 编辑
1、不太明白鱼油为什么要这么测试？想验证哪些知识点呢？
span，行内元素；div，块级元素
鱼油设定他们的宽都为100px，没有指定高度，如果不设置padding，其实都是显示不出来的。
span和div，padding设置内边距为100px，即从border向内100px，由于没有指定高度，浏览器会自动渲染一个虚拟盒子，所以能看到两个颜色块。
设置，text-align: center也都没效果，等于没写
2、二者为什么会错位？
通过1的说明，这是浏览器器高度渲染机制导致的，不建议鱼油这么使用
如果指定宽高则只能看到div：
.float-ele
{
height: 100px;
background: #ff6a00;
width: 100px;
text-align: center;
}
.div-ele
{
height: 100px;
background: blue;
width: 100px;
text-align: center;
}
本帖最后由 zjmttt 于 2019-4-13 17:57 编辑
你好
我是想验证一下padding的，两个都设置为１００，但是高度却不一样。
我现在加了文字进行测试，可为什么 浮动元素1上面没有空出100px呢
<!doctype html>
<html>
<head>
<title>div测试</title>
<meta charset="utf-8" />
<style>
.float-ele
{
padding: 100px;
background: #ff6a00;
width: 100px;
text-align: center;
}
.div-ele
{
padding: 100px;
background: blue;
width: 100px;
text-align: center;
}
</style>
</head>
<body>
<span class="float-ele">浮动元素1</span>
<div class="div-ele">浮动元素2</div>
</body>
</html>
页:
[1]