html - 去除页面两侧的空白

Question

这个问题在这里已经有了答案:





How to remove margin space around body or clear default css styles

(7 个回答)


4年前关闭。




页面左右两侧似乎有一些我不知道如何删除的空白。我相信它与 html 标签填充有关。将不胜感激。

提前致谢!

  html {
  /*/background-color: #333333;*/
  display: inline
}

header {
  text-align: right;
  background-color: #333333;
  border-bottom-width: 1px;
}

.clear {
  content: '';
  display: block;
  clear: both;
}


/*body{background-color: #333333;}*/


ul.styled_tags {
  list-style-type: none;
  text-align: center;
  margin: 0 auto;
  padding: 0px;
  overflow: hidden;
  background-color: #333333;
  display: block;
}

.styled_tags>li {
  display: inline-block;
  margin: 0px auto;
  border-right: 1px solid #666;
  position: relative;
}

.styled_tags>li span {
  position: absolute;
  top: 0.5px;
  /*background: orange;*/
  width: 100%;
  height: 2.5px;
  opacity: 0
}

.styled_tags>li a {
  display: inline-block;
  background-color: #333333;
  color: white;
  text-align: center;
  padding: 10px;
  text-decoration: none;
  border: 2px;
  vertical-align: -13px;
}

.styled_tags>li:hover span {
  animation: pulse 1s;
  animation-fill-mode: forwards;
}

@keyframes pulse {
  0% {
    opacity: 0;
    transform: translateY(5px)
  }
  100% {
    opacity: 1;
  }
}

hr {
  margin: 0px;
  border-width: 1px;
  border-color: #666;
}

ul.unstyled_tags {
  list-style-type: none;
  text-align: right;
  margin: 0 auto;
  padding: 0px;
  overflow: hidden;
  background-color: #d5d5d5;
  display: block;
}

li.blue_item1 {
  color: blue;
}

.unstyled_tags>li {
  display: inline;
  margin: 0px auto;
  position: relative;
  text-decoration: none;
}

.unstyled_tags>li a {
  display: inline;
  margin: 0px auto;
  position: relative;
  color: black;
  text-decoration: none;
}

.unstyled_tags>li a:hover {
  text-decoration: underline;
  color: blue;

<div style="border: 1px solid #666">
  <header>
    <span style="position: unset"><a class="clear"><img src="C:\Users\David\Desktop\WebDevelopmentTest\images\NotWalla\logo.svg" style="height: 25%; width: 25%; border-spacing: 20px; vertical-align: -5px" alt="My news website" ></a></span>
  </header>

  <hr>

  <nav>
    <ul class="styled_tags">
      <li><span style="background: blue"></span><a href="#shopping">A</a></li>
      <li><span style="background: red"></span><a href="#wanted">B</a></li>
      <li><span style="background: green"></span><a href="#games">C</a></li>
      <li><span style="background: brown"></span><a href="#TECH">D</a></li>
      <li><span style="background: yellow"></span><a href="#tourism">D</a></li>
      <li><span style="background: burlywood"></span><a href="#health">E</a></li>
      <li><span style="background: cyan"></span><span></span><a href="#food">F</a></li>
      <li><span style="background: magenta"></span><a href="#fashion">G</a></li>
      <li><span style="background: gray"></span><a href="#culture">H</a></li>
      <li><span style="background: firebrick"></span><a href="#car">I</a></li>
      <li><span style="background: olivedrab"></span><a href="#TV">J</a></li>
      <li><span style="background: silver"></span><a href="#business">K</a></li>
      <li><span style="background: lightblue"></span><a href="#sport">L</a></li>
      <li><span style="background: khaki"></span><a href="#news">M</a></li>
    </ul>

    <ul class="unstyled_tags">
      <li class="blue_item1">N</li><br>
      <li><a href="#fun">O</a></li><br>
      <li><a href="#weather"><b>P</b></a></li><br>
      <li><a href="#beetle"><sup><img></sup>Q</a></li>
      <li></li>
      <li></li>
    </ul>
  </nav>
</div>

Answer 1

添加这个(有一个默认的 margin ，你需要取消):

html, body {
  margin: 0;
}

html, body {
margin: 0;
}
html {
  /*/background-color: #333333;*/
  display: inline
}

header {
  text-align: right;
  background-color: #333333;
  border-bottom-width: 1px;
}

.clear {
  content: '';
  display: block;
  clear: both;
}


/*body{background-color: #333333;}*/


ul.styled_tags {
  list-style-type: none;
  text-align: center;
  margin: 0 auto;
  padding: 0px;
  overflow: hidden;
  background-color: #333333;
  display: block;
}

.styled_tags>li {
  display: inline-block;
  margin: 0px auto;
  border-right: 1px solid #666;
  position: relative;
}

.styled_tags>li span {
  position: absolute;
  top: 0.5px;
  /*background: orange;*/
  width: 100%;
  height: 2.5px;
  opacity: 0
}

.styled_tags>li a {
  display: inline-block;
  background-color: #333333;
  color: white;
  text-align: center;
  padding: 10px;
  text-decoration: none;
  border: 2px;
  vertical-align: -13px;
}

.styled_tags>li:hover span {
  animation: pulse 1s;
  animation-fill-mode: forwards;
}

@keyframes pulse {
  0% {
    opacity: 0;
    transform: translateY(5px)
  }
  100% {
    opacity: 1;
  }
}

hr {
  margin: 0px;
  border-width: 1px;
  border-color: #666;
}

ul.unstyled_tags {
  list-style-type: none;
  text-align: right;
  margin: 0 auto;
  padding: 0px;
  overflow: hidden;
  background-color: #d5d5d5;
  display: block;
}

li.blue_item1 {
  color: blue;
}

.unstyled_tags>li {
  display: inline;
  margin: 0px auto;
  position: relative;
  text-decoration: none;
}

.unstyled_tags>li a {
  display: inline;
  margin: 0px auto;
  position: relative;
  color: black;
  text-decoration: none;
}

.unstyled_tags>li a:hover {
  text-decoration: underline;
  color: blue;

<div style="border: 1px solid #666">
  <header>
    <span style="position: unset"><a class="clear"><img src="C:\Users\David\Desktop\WebDevelopmentTest\images\NotWalla\logo.svg" style="height: 25%; width: 25%; border-spacing: 20px; vertical-align: -5px" alt="My news website" ></a></span>
  </header>

  <hr>

  <nav>
    <ul class="styled_tags">
      <li><span style="background: blue"></span><a href="#shopping">A</a></li>
      <li><span style="background: red"></span><a href="#wanted">B</a></li>
      <li><span style="background: green"></span><a href="#games">C</a></li>
      <li><span style="background: brown"></span><a href="#TECH">D</a></li>
      <li><span style="background: yellow"></span><a href="#tourism">D</a></li>
      <li><span style="background: burlywood"></span><a href="#health">E</a></li>
      <li><span style="background: cyan"></span><span></span><a href="#food">F</a></li>
      <li><span style="background: magenta"></span><a href="#fashion">G</a></li>
      <li><span style="background: gray"></span><a href="#culture">H</a></li>
      <li><span style="background: firebrick"></span><a href="#car">I</a></li>
      <li><span style="background: olivedrab"></span><a href="#TV">J</a></li>
      <li><span style="background: silver"></span><a href="#business">K</a></li>
      <li><span style="background: lightblue"></span><a href="#sport">L</a></li>
      <li><span style="background: khaki"></span><a href="#news">M</a></li>
    </ul>

    <ul class="unstyled_tags">
      <li class="blue_item1">N</li><br>
      <li><a href="#fun">O</a></li><br>
      <li><a href="#weather"><b>P</b></a></li><br>
      <li><a href="#beetle"><sup><img></sup>Q</a></li>
      <li></li>
      <li></li>
    </ul>
  </nav>
</div>