CSS，float：left添加隐藏的填充？

我对html5/css世界非常陌生。我想要做一些非常基本的事情，不能理解为什么我会得到我的结果。我想在我的内容旁边添加侧边栏。我正在通过为我的内容添加一个310px的边距，并将我的内容浮动到那里。简单！CSS，float：left添加隐藏的填充？

<!DOCTYPE html> 
<html> 
<head> 
    <meta charset="utf-8"> 
    <style> 
    div.sidebar{float:left;width:300px;padding:0;background-color:yellow;} 
    div.content{margin-left:310px;background-color:green;} 
    </style> 
</head> 
<body> 

<div class="sidebar"> 
<h1>Sidebar</h1> 
</div> 

<div class="content"> 
<h1>Content</h1> 
</div> 

</body> 
</html>

但一个奇怪的现象正在发生的事情，似乎有一个1EM填充上方和侧边栏（黄色）下方，而不是内容（绿色）。因此，标题“侧边栏”和“内容”不一致。我只是想知道为什么浮动：左自动添加似乎是填充？这个填充可以删除吗？填充：0;似乎没有效果。

来源

2016-04-10 Chris

这将归因于'margin'应用于'h1'元素。因为'.content'没有被浮动，所以页边距正在崩溃。从'h1'中删除'margin'，问题就会消失。还有其他选项可能会被其他人在正确答案中提示。 –

虽然我接受了下面的答案，但这正是我所寻找的解释。谢谢！ – Chris

没问题@Chris，很高兴我能帮忙。 –

试试这个

 <!DOCTYPE html> 
    <html> 
    <head> 
     <meta charset="utf-8"> 
     <style> 
     body,html{margin:0;padding:0px} 
     div.sidebar{display:inline-block;float:left;width:300px;padding:0;background-color:yellow;} 
     div.content{margin-left:10px;display:inline-block;float:left;background-color:green;} 
     </style> 
    </head> 
    <body> 

    <div class="sidebar"> 
    <h1>Sidebar</h1> 
    </div> 

    <div class="content"> 
    <h1>Content</h1> 
    </div> 

    </body> 
    </html>

来源

2016-04-10 09:31:58 LoopCoder

啊哈！我试着'浮动'：'.content'，但这使事情变得更糟。另外添加一个'display：inline-block'就可以了！ – Chris

好，快乐编码 – LoopCoder

-1

每一个浏览器都有自己默认的“用户代理”的样式表，它使用，使景物看起来更加清晰。例如，大多数浏览器默认为链接蓝色，访问链接为紫色，为表格提供一定数量的边框和填充，将可变字体大小应用于H1，H2，H3等，以及几乎所有的填充。您正在使用的填充是因为默认的浏览器设置。尝试对元素进行全局重置。

例如：* {margin：0; padding：0}

来源

2016-04-10 09:32:33 SoilerJoe

CSS，float：left添加隐藏的填充？

回答

相关问题