html - 站点一侧的额外空白

标签 html css 

@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:jamestrombo@gmail.com">
      <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;
  ...
}

它从

继承了 100vw 
.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:jamestrombo@gmail.com">
      <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/

上一篇：javascript - 如何在 javascript 和 HTML 中通过坐标在元素内部搜索

下一篇：javascript - UIkit : set switcher tab to current window hash

相关文章：

html - 如何将用户范围划分为每行 3 列，而不是 1 列？

javascript - 为什么 Vue.js 键修饰符只适用于 `<button>` 而不是 `<div>` ？

javascript - 动画 SVG 图形条的高度

html - 是否可以使用 CSS 为禁用的 INPUT 元素设置样式？

html - 如何将样式应用于按钮上显示的 HiddenField

html - 使用 css 边框形成 Angular 点

css - Laravel 5.1 中的老 Elixir？

html - 如何添加选取框下一个上一个按钮

javascript - 使用 javascript 打印 HTML 元素的内联样式值

css - 有没有办法让 CSS 识别 100% 以包括填充、边距和边框？

©2024 IT工具网  联系我们