Question

因此，我正在尝试为我的网站构建基本布局，但遇到了问题。问题是有些边距，我无法弄清它们的来源。

index.html：

<!DOCTYPE html>

<html lang="en">
    <head>
        <link href="/css/style.css?v=0.1" type="text/css" rel="stylesheet">
        <link href="https://fonts.googleapis.com/css?family=Noto+Serif|PT+Serif" rel="stylesheet">

        <meta name="viewport" content="width=device-width, initial-scale=1.0">

        <meta charset="utf-8">

        <link rel="icon" href="/images/favicon.png" type="image/png">
    </head>

    <body>
        <div class="wrapper">
            <div class="sidebar">
                <p>sidebar</p>
            </div>
            <div class="main">
                <p>main</p>
            </div>
        </div>
    </body>
</html>

style.css：

/* set defaults */

html, body, div {
    background-color: white; /* Was #eee or #ccc */
    /*font-size: 16px;*/
    margin: 0;
    padding: 0;
    border: 0;
    outline: 0;
    font-size: 100%;
    vertical-align: baseline;
    background: transparent;
    color: white;
    font-family: 'PT Serif', serif;
    /*font-family: 'Noto Serif', serif;*/
    box-sizing: border-box;
}

.wrapper {
    width: 100%;
    max-width: 1200px;
    height: auto;
    padding: 0;
    margin: 0;
    border: 0;
    outline: 0;
}

.main {
    width: 80%;
    height: 100px;
    color: white;
    margin: 0;
    padding: 0;
    border: 0;
    outline: 0;
    background-color: black;
    display: inline-block;
}

.sidebar {
    width: 20%;
    height: 100px;
    color: black;
    margin: 0;
    padding: 0;
    border: 0;
    outline: 0;
    background-color: lightgrey;
    display: inline-block;
}

p {
    margin: 0;
    padding: 0;
}

所以当我如图所示呈现页面时，我得到了：

但是当我将侧边栏的宽度设置为19％时，我得到了：

如您所见，这两个元素的右边都有一些空白。我不知道这是哪里来的，检查员告诉我我没有利润！边距，填充，边框和轮廓都设置为零，所以我不知道它来自哪里。有什么我想念的吗？

编辑：我应该说过，我试图使元素彼此相邻显示而不包装。

Answer 1

实际上，当您有两个具有width:19%和width:80%的元素时，没有得到保证金问题，其余的width:1%得到了您提到的保证金差距。

只需将float:left;和sidebar类都设置为main即可，以避免出现边距问题。无需更改width。

html,
body,
div {
  background-color: white;
  /* Was #eee or #ccc */
  /*font-size: 16px;*/
  margin: 0;
  padding: 0;
  border: 0;
  outline: 0;
  font-size: 100%;
  vertical-align: baseline;
  background: transparent;
  color: white;
  font-family: 'PT Serif', serif;
  /*font-family: 'Noto Serif', serif;*/
  box-sizing: border-box;
}

.wrapper {
  width: 100%;
  max-width: 1200px;
  height: auto;
  padding: 0;
  margin: 0;
  border: 0;
  outline: 0;
}

.main {
  width: 80%;
  height: 100px;
  color: white;
  margin: 0;
  padding: 0;
  border: 0;
  outline: 0;
  background-color: black;
  display: inline-block;
  float: left;
}

.sidebar {
  width: 20%;
  height: 100px;
  color: black;
  margin: 0;
  padding: 0;
  border: 0;
  outline: 0;
  background-color: lightgrey;
  display: inline-block;
  float: left;
}

p {
  margin: 0;
  padding: 0;
}

<!DOCTYPE html>
<html lang="en">

<head>
  <link href="/css/style.css?v=0.1" type="text/css" rel="stylesheet">
  <link href="https://fonts.googleapis.com/css?family=Noto+Serif|PT+Serif" rel="stylesheet">

  <meta name="viewport" content="width=device-width, initial-scale=1.0">

  <meta charset="utf-8">

  <link rel="icon" href="/images/favicon.png" type="image/png">
</head>

<body>
  <div class="wrapper">
    <div class="sidebar">
      <p>sidebar</p>
    </div>
    <div class="main">
      <p>main</p>
    </div>
  </div>
</body>

</html>

Answer 2

之所以这样做，是因为内联元素尊重html中div之间的单词间距。第一个和第二个之间的间隔创建一个实际的间隙，您可以在页面上看到该间隙。

您可以通过在html中的内联div之间删除空格来轻松删除它。

div {
    display: inline-block;
    width: 50%;
}

<div style="background: green">Width: 50%</div><div  style="background: red">Width: 50%</div>

但是我希望这不是您所期望的，别担心还有其他方法：）

字体大小：0; 两个div之间的间距是由于单词间距引起的，因此在父容器中添加font-size: 0将消除两个div之间的间距。

.wrapper {
   width: 100%;
   font-size: 0
}

div {
   display: inline-block;
   width: 50%;
}

<div class='wrapper'>
   <div style="background: green; font-size: 14px" class="sidebar">Width 50%</div>
    <div style="background: red; font-size: 14px" class="main">Width 50% </div>
</div>

显示：flex 此方法仅支持IE> 10版本，您可以将display: flex应用于父容器，并将相应的relavent宽度应用于子div。

.wrapper {
  display: flex;
}

.main {
   width: 80%
}

.sidebar {
  width: 20%
}

<div class='wrapper'>
    <div style="background: green" class="sidebar">Width 20%</div>
    <div style="background: red" class="main">Width 80% </div>
</div>

Answer 3

您忘记添加浮点数。请在您的CSS中添加以下CSS，以免出现空白

.sidebar, .main{ float:left; }

Answer 4

如果您使用float：left而不是display：inline-block;您的保证金将删除

我的元素的利润在哪里？

4 个答案: