多余

多余

关注
发信
关注(28)粉丝(399)

html - 网站一侧的多余空白

@font-face {
  font-family: 'Open Sans';
  font-style: normal;
  font-weight: 300;
  src: local('Open Sans Light'), local('OpenSans-Light'), url(https://fonts.gstatic.com/s/opensans/v13/DXI1ORHCpsQm3Vp6mXoaTRampu5_7CjHW5spxoeN3Vs.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2212, U+2215, U+E0FF, U+EFFD, U+F000;
}
@font-face {
  font-family: 'Raleway';
  font-style: normal;
  font-weight: 300;
  src: local('Raleway Light'), local('Raleway-Light'), url(https://fonts.gstatic.com/s/raleway/v9/-_Ctzj9b56b8RgXW8FAriQzyDMXhdD8sAj6OAJTFsBI.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2212, U+2215, U+E0FF, U+EFFD, U+F000;
}
.place {
  height: 100vh;
  width: 100vw;
}
body {
  min-height: 200vh;
  max-width: 100%;
  margin: 0px;
}
h1 {
  color: white;
  font-family: 'Raleway', sans-serif;
  position: relative;
  top: 40vh;
  left: 39vw;
  font-size: 3em;
  font-weight: 300;
}
* {
  margin: 0px;
  padding: 0px;
}
.lol {
  font-family: 'Open Sans', sans-serif;
  top: 43vh;
  left: 45.5vw;
  position: relative;
}
.catslol {
  top: 43.3vh;
  height: 3.4vw;
  width: 3.4vw;
  position: relative;
  left: 46.5vw;
}
.cool {
  height: 3.6vw;
  width: 3.6vw;
  position: relative;
  left: 47vw;
  top: 43.7vh;
}
.cool:hover {
  -webkit-transform: rotate(360deg);
  -ms-transform: rotate(360deg);
  -moz-transform: rotate(360deg);
  -o-transform: rotate(360deg);
  transform: rotate(360deg);
  -webkit-transition: .2s ease-in-out;
  -moz-transition: .2s ease-in-out;
  -o-transition: .2s ease-in-out;
  transition: .2s ease-in-out;
  cursor: pointer;
}
.lmao {
  position: relative;
  text-align: center;
  font-family: 'Open Sans', sans-serif;
  right: -70vw;
  width: 20vw;
  height: 100vh;
  z-index: 75;
  background-color: black;
  color: white;
}
.catslol:hover {
  -webkit-transform: rotate(360deg);
  -ms-transform: rotate(360deg);
  -moz-transform: rotate(360deg);
  -o-transform: rotate(360deg);
  transform: rotate(360deg);
  -webkit-transition: .2s ease-in-out;
  -moz-transition: .2s ease-in-out;
  -o-transition: .2s ease-in-out;
  transition: .2s ease-in-out;
}
.lol:hover {
  -webkit-transform: rotate(360deg);
  -ms-transform: rotate(360deg);
  -moz-transform: rotate(360deg);
  -o-transform: rotate(360deg);
  transform: rotate(360deg);
  -webkit-transition: .2s ease-in-out;
  -moz-transition: .2s ease-in-out;
  -o-transition: .2s ease-in-out;
  transition: .2s ease-in-out;
}
.lmao.open {
  -ms-transform: translate(20vw, 0);
  -webkit-transform: translate(20vw, 0);
  -o-transform: translate(20vw, 0);
  -moz-transform: translate(20vw, 0);
  transform: translate(20vw, 0);
  -webkit-transition: .3s ease-in-out transform;
  -moz-transition: .3s ease-in-out transform;
  -o-transition: .3s ease-in-out transform;
  transition: .3s ease-in-out transform;
}
img {
  height: 3vw;
  width: 3vw;
}
.place {
  background: black;
  background: #360033;
  /* fallback for old browsers */
  background: -webkit-linear-gradient(to bottom left, #360033, #0b8793);
  /* Chrome 10-25, Safari 5.1-6 */
  background: linear-gradient(to bottom left, #360033, #0b8793);
  /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */
}

<body>
  <section class="place">
    <h1>James Trombo</h1>
    <a href="https://github.com/DarkReaperRising">
      <img class="lol" src="githubrofl.png" kasperskylab_antibanner="on">
    </a>
    <a href="https://www.instagram.com/james.trombo/">
      <img class="catslol" src="yaybruh.png" kasperskylab_antibanner="on">
    </a>
    <a href="mailto:[email protected]">
      <img class="cool" src="daquan.png" kasperskylab_antibanner="on">
    </a>
  </section>
  <section class="aboutme">
    <div class="lmao">
      <p>Hey internet people! I'm James and I do a bunch of stuff I like to code, play sports and sleep until 1. On the main page there are all of the links to my limited social media.</p>
    </div>
  </section>
</body>

为什么右边有多余的空间？
我已将边距和填充设置为0。

最佳答案

是因为

h1 {
  ...
  left: 39vw;
  ...
}

它继承自
.place {
  height: 100vh;
  width: 100vw;
}

所以你的页面宽度是139vw，这给了你额外的填充。
移除它可以解决您的问题：
@font-face {
  font-family: 'Open Sans';
  font-style: normal;
  font-weight: 300;
  src: local('Open Sans Light'), local('OpenSans-Light'), url(https://fonts.gstatic.com/s/opensans/v13/DXI1ORHCpsQm3Vp6mXoaTRampu5_7CjHW5spxoeN3Vs.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2212, U+2215, U+E0FF, U+EFFD, U+F000;
}
@font-face {
  font-family: 'Raleway';
  font-style: normal;
  font-weight: 300;
  src: local('Raleway Light'), local('Raleway-Light'), url(https://fonts.gstatic.com/s/raleway/v9/-_Ctzj9b56b8RgXW8FAriQzyDMXhdD8sAj6OAJTFsBI.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2212, U+2215, U+E0FF, U+EFFD, U+F000;
}
.place {
  height: 100vh;
  width: 100vw;
}
body {
  min-height: 200vh;
  max-width: 100%;
  margin: 0px;
}
h1 {
  color: white;
  font-family: 'Raleway', sans-serif;
  position: relative;
  top: 40vh;
  font-size: 3em;
  font-weight: 300;
}
* {
  margin: 0px;
  padding: 0px;
}
.lol {
  font-family: 'Open Sans', sans-serif;
  top: 43vh;
  left: 45.5vw;
  position: relative;
}
.catslol {
  top: 43.3vh;
  height: 3.4vw;
  width: 3.4vw;
  position: relative;
  left: 46.5vw;
}
.cool {
  height: 3.6vw;
  width: 3.6vw;
  position: relative;
  left: 47vw;
  top: 43.7vh;
}
.cool:hover {
  -webkit-transform: rotate(360deg);
  -ms-transform: rotate(360deg);
  -moz-transform: rotate(360deg);
  -o-transform: rotate(360deg);
  transform: rotate(360deg);
  -webkit-transition: .2s ease-in-out;
  -moz-transition: .2s ease-in-out;
  -o-transition: .2s ease-in-out;
  transition: .2s ease-in-out;
  cursor: pointer;
}
.lmao {
  position: relative;
  text-align: center;
  font-family: 'Open Sans', sans-serif;
  right: -70vw;
  width: 20vw;
  height: 100vh;
  z-index: 75;
  background-color: black;
  color: white;
}
.catslol:hover {
  -webkit-transform: rotate(360deg);
  -ms-transform: rotate(360deg);
  -moz-transform: rotate(360deg);
  -o-transform: rotate(360deg);
  transform: rotate(360deg);
  -webkit-transition: .2s ease-in-out;
  -moz-transition: .2s ease-in-out;
  -o-transition: .2s ease-in-out;
  transition: .2s ease-in-out;
}
.lol:hover {
  -webkit-transform: rotate(360deg);
  -ms-transform: rotate(360deg);
  -moz-transform: rotate(360deg);
  -o-transform: rotate(360deg);
  transform: rotate(360deg);
  -webkit-transition: .2s ease-in-out;
  -moz-transition: .2s ease-in-out;
  -o-transition: .2s ease-in-out;
  transition: .2s ease-in-out;
}
.lmao.open {
  -ms-transform: translate(20vw, 0);
  -webkit-transform: translate(20vw, 0);
  -o-transform: translate(20vw, 0);
  -moz-transform: translate(20vw, 0);
  transform: translate(20vw, 0);
  -webkit-transition: .3s ease-in-out transform;
  -moz-transition: .3s ease-in-out transform;
  -o-transition: .3s ease-in-out transform;
  transition: .3s ease-in-out transform;
}
img {
  height: 3vw;
  width: 3vw;
}
.place {
  background: black;
  background: #360033;
  /* fallback for old browsers */
  background: -webkit-linear-gradient(to bottom left, #360033, #0b8793);
  /* Chrome 10-25, Safari 5.1-6 */
  background: linear-gradient(to bottom left, #360033, #0b8793);
  /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */
}

<body>
  <section class="place">
    <h1>James Trombo</h1>
    <a href="https://github.com/DarkReaperRising">
      <img class="lol" src="githubrofl.png" kasperskylab_antibanner="on">
    </a>
    <a href="https://www.instagram.com/james.trombo/">
      <img class="catslol" src="yaybruh.png" kasperskylab_antibanner="on">
    </a>
    <a href="mailto:[email protected]">
      <img class="cool" src="daquan.png" kasperskylab_antibanner="on">
    </a>
  </section>
  <section class="aboutme">
    <div class="lmao">
      <p>Hey internet people! I'm James and I do a bunch of stuff I like to code, play sports and sleep until 1. On the main page there are all of the links to my limited social media.</p>
    </div>
  </section>
</body>

关于html - 网站一侧的多余空白，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/35260008/

10-09 09:05
Powered by LMLPHP ©2024 多余 0.028573