时间戳

首页 > 解决方案 > 我的元素的边距来自哪里？

html - 我的元素的边距来自哪里？

问题描述

因此，我正在尝试为我的网站构建基本布局，但遇到了问题。问题是我无法弄清楚它们来自哪里的一些利润。

索引.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>

样式.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% 时，我得到：

将侧边栏宽度设置为 19% 后

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

编辑：我应该说我正在尝试让元素在不换行的情况下彼此相邻显示。

标签： htmlcss

解决方案

实际上，当您有两个具有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>

推荐阅读