[已解决]关于span和div

zjmttt · 发表于 2019-4-12 19:45:47

马上注册，结交更多好友，享用更多功能^_^

您需要登录才可以下载或查看，没有账号？立即注册

x

请问一下下面的代码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:29:57

本帖最后由不二如是于 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;
        }

跳转到最佳答案楼层

不二如是 · 发表于 2019-4-13 10:29:57

本帖最后由不二如是于 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:43:12

本帖最后由 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>

账号		自动登录	找回密码
密码			立即注册