个人中心
gpt4 book ai didi

html - 站点一侧的额外空白

转载 作者：行者123 更新时间：2023-11-28 02:59:33 25 4
gpt4 key购买 nike 

@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/

25 4 0
文章推荐： c++ - luabind 没有启动我定义的功能
文章推荐： c++ - 将应用程序作为 Windows 服务运行是否需要管理员权限？
文章推荐： c++ - 保存并加载 QList 到文件
文章推荐： c++ - 启用 OpenCV cuda 的构建不起作用
行者123
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com