Question

我不知道为什么如果div的位置没有设置为“fixed”而没有消除侧空间，并且当使用bootstrap框架时，侧面空间会自动消除。我已经创建了这个HTML页面，我想知道如何做到这一点。

<!doctype html>
<html>
<head>
     <title> No side Spaces Div</title>

     <style>

     #navigation {
     background-color:#CECECE;
     color:#545454;
     font-family:Verdana, Arial, Helvetica, sans-serif;
     font-size:18px;
     padding:12px;
     }

     #content {
     background-color:#EAEAEA;
     font-size:16px;
     }

     a:link, a:visited {
     color:inherit;
     padding:inherit;
     text-decoration:none;
     }

     a:hover, a:active {
     color:#030303;
     }

    </style>
 </head>

    <body>
    <div id="navigation">
        <a href="#">Home</a>
        <a href="#">Contact</a>
        <a href="#">About</a>
    </div>

    <div id="content">
        This is some text...
    </div>

</html>

Answer 1

将边距和填充设置为零：

body {
  margin: 0;
  padding: 0;
}

Answer 2

默认情况下，浏览器会为元素添加边距和填充。您需要使用以下CSS代码段重置它。

* { /* I suggest body element for your solution */
  margin: 0;
  padding: 0;
}

<!doctype html>
<html>

<head>
  <title>No side Spaces Div</title>

  <style>
    #navigation {
      background-color: #CECECE;
      color: #545454;
      font-family: Verdana, Arial, Helvetica, sans-serif;
      font-size: 18px;
      padding: 12px;
    }
    #content {
      background-color: #EAEAEA;
      font-size: 16px;
    }
    a:link,
    a:visited {
      color: inherit;
      padding: inherit;
      text-decoration: none;
    }
    a:hover,
    a:active {
      color: #030303;
    }
  </style>
</head>

<body>
  <div id="navigation">
    <a href="#">Home</a>
    <a href="#">Contact</a>
    <a href="#">About</a>
  </div>

  <div id="content">
    This is some text...
  </div>

</html>

Answer 3

尝试使用CSS重置，如下所示： Demo

*{
    padding:0;
    margin:0;
}

对于完整的CSS重置 This link 会有所帮助。

更新：

CSS重置（或“重置CSS”）是一个短暂的，经常被压缩（缩小）一组CSS规则，用于将所有HTML元素的样式重置为a 一致的基线。

有关详细信息，请浏览 link

Answer 4

在你的CSS中尝试这个;

body {
   margin :0;
   padding :0;
}

如何创建没有侧面空间的div？

4 个答案: