从页面两侧删除空格

时间：2017-03-08 17:55:46

标签： html css

页面的左右两侧出现了一些我不知道如何删除的空白区域。我相信它与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>

2 个答案:

答案 0 :(得分：0)

这是<body>元素的默认边距。将其删除：

body {
  margin: 0;
}

＆＃13;
＆＃13; 
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;
}

body {
  margin: 0;
}
＆＃13; 
<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>
＆＃13;
＆＃13;
＆＃13;

答案 1 :(得分：0)

添加此项（您需要取消默认的保证金）：

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>

相关问题
最新问题