Question

我对html5 / css宇宙非常陌生。我试图做一些非常基本的事情，无法理解我为什么会得到我的结果。我想在我的内容旁边添加一个侧边栏。我通过在我的内容中添加一个310px的边距并将我的副内容放在那里来实现这一点。简单！

<!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填充（黄色），但不是内容（绿色）。因此，标题＆＃34;边栏＆＃34;和＆＃34;内容＆＃34;没有对齐。我只是想知道为什么浮动：左边自动添加了什么似乎是填充？这个填充可以删除吗？填充：0;似乎没有效果。

Answer 1

试试这个

        <!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>

Answer 2

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

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

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

2 个答案: