分类导航
程序笔记程序问答

我的客户端网页左侧有多余的边距

程序问答   发布时间：2022-06-01  发布网站：大佬教程  code.js-code.com
大佬教程收集整理的这篇文章主要介绍了我的客户端网页左侧有多余的边距，大佬教程大佬觉得挺不错的，现在分享给大家，也给大家做个参考。

如何解决我的客户端网页左侧有多余的边距？

开发过程中遇到我的客户端网页左侧有多余的边距的问题如何解决？下面主要结合日常开发的经验，给出你关于我的客户端网页左侧有多余的边距的解决方法建议，希望对你解决我的客户端网页左侧有多余的边距有所启发或帮助；

我目前正在为我的世界服务器制作网站。虽然还处于起步阶段，但进展顺利。然而，我的左边有一个非常顽固的边缘，无论我尝试什么我都无法摆脱。我不太擅长网络开发，所以可能有些东西是我在 HTML 或 CSS 中没有看到的。

[编辑] 最初写这篇文章时忘了添加这个，我实际上已经看过这里提出类似问题的问题，但没有一个解决方案有效。

Here you can see the margin on the left

这里是HTML和CSS：

@charset "utf-8";

body {
  margin:0;
  overflow:hidden;
  position: absolute; 
}

HTML {
overflow-y: scroll; overflow-x:hIDden; 
height: 100%;
padding:0;
}   

body {
  color: #fff;
  margin: 0;
  padding: 0;
  -webkit-perspective: 1px;
  perspective: 1px;
  -webkit-transform-style: preserve-3d;
  transform-style: preserve-3d;
  height: 100%;
  overflow-y: scroll;
  overflow-x: hIDden;
}

header {
  Box-sizing: border-Box;
  min-height: 40vw;
  padding: 30vw 0 10vw;
  position: relative;
  -webkit-transform-style: inherit;
  transform-style: inherit;
  wIDth: 100vw;
}

header,header:before { BACkground: 50% 50% / cover; }

header::before {
  bottom: 0;
  content: "";
  left: 0;
  position: absolute;
  right: 0;
  top: 0;
  display: block;
  BACkground-color: mIDnight-blue;
  BACkground-image: url(https://imgur.com/ehxgn4Q.png);
  BACkground-size: 100%;
  margin-left:0px;
  -webkit-transform-origin: center center 0;
  -webkit-transform: translateZ(-1pX) scale(2);
  transform-origin: center center 0;
  transform: translateZ(-1pX) scale(2);
  z-index: -1;
  min-height: 100vh;
}

header * {
  Font-family:Jura; 
  Font-weight: bold;
  letter-spacing: 0.2em;
  text-align: center;
  margin: 0;
  padding: 1em 0;
}

header p { BACkground-color: hsla(0,0%,100%,0.1); }

main {
  BACkground-color:white;
  line-height: 1.7;
  max-wIDth: 32em;
  padding: 5% calc(50% - 16em) 35%;
  position: relative;
  z-index: 2;
  Font-family:Jura;
  color:#4b4c4d;
}



.footer-basic {
  padding:40px 0;
  BACkground-color:#b7e2fc;
  color:#4b4c4d;
}

.footer-basic ul {
  padding:0;
  List-style:none;
  text-align:center;
  Font-size:18px;
  line-height:1.6;
  margin-bottom:0;
}

.footer-basic li {
  padding:0 10px;
}

.footer-basic ul a {
  color:inherit;
  text-decoration:none;
  opacity:0.8;
}

.footer-basic ul a:hover {
  opacity:1;
}

.footer-basic .social {
  text-align:center;
  padding-bottom:25px;
}

.footer-basic .social > a {
  Font-size:24px;
  wIDth:40px;
  height:40px;
  line-height:40px;
  display:inline-block;
  text-align:center;
  margin:0 8px;
  color:inherit;
  opacity:0.75;
}

.footer-basic .social > a:hover {
  opacity:0.9;
}

.footer-basic .copyright {
  margin-top:15px;
  text-align:center;
  Font-size:13px;
  color:#aaa;
  margin-bottom:0;
}

.List-inline-item {
float:left; 
margin-left:268px;  
Font-family:Jura;  
}
<!DOCTYPE HTML>
<HTML lang="en">
<head>
    <Meta charset="UTF-8">
    
        <Meta name="vIEwport" content="wIDth=device-wIDth,initial-scale=1.0">
    
            <link href="CSS/main.CSS" rel="stylesheet">
        
                
    
                    <script src="main.Js"></script> 
    
   <title>WinterCrest</title>
   
</head>

<body>

<header>
  <h1>Server IP Address: play.wintercrestmc.com</h1>
</header>

<main>
  <p>Lorem ipsum dolor sit amet,consectetur adipiscing elit. Phasellus porta,augue ut vulputate aliquet,est massa malesuada libero,nec aliquet nibh nisl sit amet urna. In TincIDunt maximus quam,ac feugiat ante porta ID. Maecenas lobortis feugiat lorem vel auctor. Integer a nulla in orci ultrices semper. Suspendisse dAPIbus quam vel fringilla elementum. Etiam nibh lectus,maximus non sAPIen non,faucibus porttitor est. Proin eget fringilla sem. Nullam urna augue,vulputate sit amet dui eget,scelerisque facilisis mauris. Nam lorem est,elementum sed ullamcorper volutpat,suscipit et dui.</p>
    <p>Nulla ac justo lacus. Vestibulum urna nulla,iaculis in sAPIen sed,pretium semper tortor. Maecenas tristique,erat nec fermentum varius,massa arcu faucibus libero,ut convallis lacus odio a enim. Aenean semper,turpis auctor placerat pellentesque,ligula justo vehicula ex,accumsan pellentesque nisi diam eget neque. Mauris ID risus velit. Phasellus malesuada est turpis,ac congue odio malesuada ornare. Vivamus in diam mi. Mauris pharetra vestibulum lacus,nec iaculis mi vehicula eget. Integer finibus ID libero ut cursus.</p>
        <p>Etiam nec gravida tortor. Duis placerat egestas urna. Nulla ullamcorper nisl non nulla consectetur,ut soDales elit iaculis. Sed gravida porttitor felis non commodo. Nunc venenatis lorem diam,nec ornare purus fringilla vitae. Curabitur sed Leo orci. Nam eros enim,interdum elementum tristique vel,aliquam a nisl. In ac interdum neque,in lacinia mi. Donec porta a lacus sit amet auctor.</p>
            <p>Nunc TincIDunt erat vulputate velit malesuada,quis dAPIbus est tristique. Lorem ipsum dolor sit amet,consectetur adipiscing elit. Phasellus ullamcorper maximus urna a suscipit. In at vulputate sAPIen,sit amet sollicitudin lorem. Sed feugiat auctor neque vel efficitur. Quisque blandit porttitor massa,eu facilisis tortor volutpat a. Nam accumsan faucibus mauris,in lobortis sAPIen imperdIEt vitae. Interdum et malesuada fames ac ante ipsum primis in faucibus. Integer hendrerit sit amet purus vitae finibus. Curabitur ut soDales lacus,ac dignissim arcu. Maecenas sit amet rhoncus odio. Aliquam viverra ligula ac justo elementum vestibulum. Maecenas at semper tellus. Sed malesuada placerat gravida. Maecenas sAPIen erat,vestibulum eget ante sollicitudin,laoreet blandit nunc. Donec nisi turpis,vestibulum eu lacus sed,cursus aliquam ipsum.</p>
                <p>Quisque sed rhoncus Leo. Suspendisse nec nibh odio. Aenean sed felis dignissim,faucibus massa ID,TincIDunt erat. Nullam nec rutrum risus. Fusce rutrum orci et pulvinar condimentum. In hac habitasse platea Dictumst. Praesent eget justo pulvinar,rutrum erat non,luctus justo. Nulla nisi velit,mollis non ipsum eu,convallis TincIDunt odio. Ut et massa ac magna pellentesque varius sit amet at dolor. Morbi tristique,elit eget ornare fringilla,ipsum neque ultrices neque,eget scelerisque dolor purus ID enim. Aenean in fringilla mi,nec tristique nunc. Suspendisse potenti. Sed ultricIEs eros sit amet maximus ultrices.</p>
</main>
  
     <div class="footer-basic">
        <footer>
        <div class="social"><a href="https://discord.gg/XMVhrct"><img class="discord_logo" src="images/social_icons/logo-discord.svg"></img></a><a href="https://wintercrest.freeforums.net/"><img class="forum_logo" src="images/social_icons/people-circle-outline.svg"></img></a>
            <ul class="List-inline">
                <li class="List-inline-item"><a href="https://www.minecraftforum.net/forums/servers-java-edition/pc-servers/3005157-wintercrest-non-grIEf-survival-frIEndly-community?" target="_blank">Leave a RevIEw</a></li>
                <li class="List-inline-item"><a href="https://wintercrest.enjin.com/shop" target="_blank">Donate To Us</a></li>
                <li class="List-inline-item"><a href="https://forms.gle/UncJMpFWz83bjRMj7" target="_blank">Make A Suggestion</a></li>
                <li class="List-inline-item"><a href="https://docs.Google.com/document/d/1ZolyouZs0lf34OccN6QEhOVBhpQF5w1sP_JvNG8y2kE/edit?usp=sharing" target="_blank">Harassment Policy</a></li>
            </ul>
            </div>
        </footer>
        
    <script src="https://cdnjs.cloudFlare.com/AJAX/libs/twitter-bootstrap/4.1.3/Js/bootstrap.bundle.min.Js"></script>  
    
</body>

</HTML>

解决方法

将宽度 :100% 添加到 body css

@charset "utf-8";

body {
  margin:0;
  overflow:hidden;
  position: absolute; 
  padding:0;
   width:100% /* add width 100% */
}

html {
 overflow-x:hidden; 

height: 100%;
padding:0;
margin:0;
}   

body {
  color: #fff;
  margin: 0;
  padding: 0;
  -webkit-perspective: 1px;
  perspective: 1px;
  -webkit-transform-style: preserve-3d;
  transform-style: preserve-3d;
  height: 100%;
  overflow-x: hidden;
}

header {
  box-sizing: border-box;
  min-height: 40vw;
  padding: 30vw 0 10vw;
  position: relative;
  -webkit-transform-style: inherit;
  transform-style: inherit;
  width: 100vw;
}

header,header:before { BACkground: 50% 50% / cover; }

header::before {
  bottom: 0;
  content: "";
  left: 0;
  position: absolute;
  right: 0;
  top: 0;
  display: block;
  BACkground-color: midnight-blue;
  BACkground-image: url(https://imgur.com/ehxgn4Q.png);
  BACkground-size: 100%;
  margin-left:0px;
  -webkit-transform-origin: center center 0;
  -webkit-transform: translateZ(-1pX) scale(2);
  transform-origin: center center 0;
  transform: translateZ(-1pX) scale(2);
  z-index: -1;
  min-height: 100vh;
}

header * {
  font-family:Jura; 
  font-weight: bold;
  letter-spacing: 0.2em;
  text-align: center;
  margin: 0;
  padding: 1em 0;
}

header p { BACkground-color: hsla(0,0%,100%,0.1); }

main {
  BACkground-color:white;
  line-height: 1.7;
  max-width: 32em;
  padding: 5% calc(50% - 16em) 35%;
  position: relative;
  z-index: 2;
  font-family:Jura;
  color:#4b4c4d;
}



.footer-basic {
  padding:40px 0;
  BACkground-color:#b7e2fc;
  color:#4b4c4d;
}

.footer-basic ul {
  padding:0;
  list-style:none;
  text-align:center;
  font-size:18px;
  line-height:1.6;
  margin-bottom:0;
}

.footer-basic li {
  padding:0 10px;
}

.footer-basic ul a {
  color:inherit;
  text-decoration:none;
  opacity:0.8;
}

.footer-basic ul a:hover {
  opacity:1;
}

.footer-basic .social {
  text-align:center;
  padding-bottom:25px;
}

.footer-basic .social > a {
  font-size:24px;
  width:40px;
  height:40px;
  line-height:40px;
  display:inline-block;
  text-align:center;
  margin:0 8px;
  color:inherit;
  opacity:0.75;
}

.footer-basic .social > a:hover {
  opacity:0.9;
}

.footer-basic .copyright {
  margin-top:15px;
  text-align:center;
  font-size:13px;
  color:#aaa;
  margin-bottom:0;
}

.list-inline-item {
float:left; 
margin-left:268px;  
font-family:Jura;  
}
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    
        <meta name="viewport" content="width=device-width,initial-scale=1.0">
    
            <link href="css/main.css" rel="stylesheet">
        
                
    
                    <script src="main.js"></script> 
    
   <title>WinterCrest</title>
   
</head>

<body>

<header>
  <h1>Server IP Address: play.wintercrestmc.com</h1>
</header>

<main>
  <p>Lorem ipsum dolor sit amet,consectetur adipiscing elit. Phasellus porta,augue ut vulputate aliquet,est massa malesuada libero,nec aliquet nibh nisl sit amet urna. In Tincidunt maximus quam,ac feugiat ante porta id. Maecenas lobortis feugiat lorem vel auctor. Integer a nulla in orci ultrices semper. Suspendisse dapibus quam vel fringilla elementum. Etiam nibh lectus,maximus non sapien non,faucibus porttitor est. Proin eget fringilla sem. Nullam urna augue,vulputate sit amet dui eget,scelerisque facilisis mauris. Nam lorem est,elementum sed ullamcorper volutpat,suscipit et dui.</p>
    <p>Nulla ac justo lacus. Vestibulum urna nulla,iaculis in sapien sed,pretium semper tortor. Maecenas tristique,erat nec fermentum varius,massa arcu faucibus libero,ut convallis lacus odio a enim. Aenean semper,turpis auctor placerat pellentesque,ligula justo vehicula ex,accumsan pellentesque nisi diam eget neque. Mauris id risus velit. Phasellus malesuada est turpis,ac congue odio malesuada ornare. Vivamus in diam mi. Mauris pharetra vestibulum lacus,nec iaculis mi vehicula eget. Integer finibus id libero ut cursus.</p>
        <p>Etiam nec gravida tortor. Duis placerat egestas urna. Nulla ullamcorper nisl non nulla consectetur,ut sodales elit iaculis. Sed gravida porttitor felis non commodo. Nunc venenatis lorem diam,nec ornare purus fringilla vitae. Curabitur sed Leo orci. Nam eros enim,interdum elementum tristique vel,aliquam a nisl. In ac interdum neque,in lacinia mi. Donec porta a lacus sit amet auctor.</p>
            <p>Nunc Tincidunt erat vulputate velit malesuada,quis dapibus est tristique. Lorem ipsum dolor sit amet,consectetur adipiscing elit. Phasellus ullamcorper maximus urna a suscipit. In at vulputate sapien,sit amet sollicitudin lorem. Sed feugiat auctor neque vel efficitur. Quisque blandit porttitor massa,eu facilisis tortor volutpat a. Nam accumsan faucibus mauris,in lobortis sapien imperdiet vitae. Interdum et malesuada fames ac ante ipsum primis in faucibus. Integer hendrerit sit amet purus vitae finibus. Curabitur ut sodales lacus,ac dignissim arcu. Maecenas sit amet rhoncus odio. Aliquam viverra ligula ac justo elementum vestibulum. Maecenas at semper tellus. Sed malesuada placerat gravida. Maecenas sapien erat,vestibulum eget ante sollicitudin,laoreet blandit nunc. Donec nisi turpis,vestibulum eu lacus sed,cursus aliquam ipsum.</p>
                <p>Quisque sed rhoncus Leo. Suspendisse nec nibh odio. Aenean sed felis dignissim,faucibus massa id,Tincidunt erat. Nullam nec rutrum risus. Fusce rutrum orci et pulvinar condimentum. In hac habitasse platea Dictumst. Praesent eget justo pulvinar,rutrum erat non,luctus justo. Nulla nisi velit,mollis non ipsum eu,convallis Tincidunt odio. Ut et massa ac magna pellentesque varius sit amet at dolor. Morbi tristique,elit eget ornare fringilla,ipsum neque ultrices neque,eget scelerisque dolor purus id enim. Aenean in fringilla mi,nec tristique nunc. Suspendisse potenti. Sed ultricies eros sit amet maximus ultrices.</p>
</main>
  
     <div class="footer-basic">
        <footer>
        <div class="social"><a href="https://discord.gg/XMVhrct"><img class="discord_logo" src="images/social_icons/logo-discord.svg"></img></a><a href="https://wintercrest.freeforums.net/"><img class="forum_logo" src="images/social_icons/people-circle-outline.svg"></img></a>
            <ul class="list-inline">
                <li class="list-inline-item"><a href="https://www.minecraftforum.net/forums/servers-java-edition/pc-servers/3005157-wintercrest-non-grief-survival-friendly-community?" target="_blank">Leave a Review</a></li>
                <li class="list-inline-item"><a href="https://wintercrest.enjin.com/shop" target="_blank">Donate To Us</a></li>
                <li class="list-inline-item"><a href="https://forms.gle/UncJMpFWz83bjRMj7" target="_blank">Make A Suggestion</a></li>
                <li class="list-inline-item"><a href="https://docs.google.com/document/d/1ZoLyouZs0lf34OccN6QEhOVBhpQF5w1sP_JvNG8Y2kE/edit?usp=sharing" target="_blank">Harassment Policy</a></li>
            </ul>
            </div>
        </footer>
        
    <script src="https://cdnjs.cloudFlare.com/ajax/libs/twitter-bootstrap/4.1.3/js/bootstrap.bundle.min.js"></script>  
    
</body>

</html>

,

我的第一个想法是浏览器对许多标签都有自己的默认设置。

通常使用 css 文件来确保浏览器只使用您指定的 css。

类似于：

body,div,ul,ol,li,h1,h2,h3,h4,h5,h6,p,th,td { 
    margin:0;
    padding:0;
}

包括您想要的任何标签和属性。

将您在 html 中使用的所有标签的边距和内边距设置为 0。

然后，您可以在类或 ID 或内联中设置您想要的内容，以便您确切地知道什么来自哪里。

不确定这是否是您的问题，但应该可以帮助您追踪。

此外，在所有标签上放置边框，以确定哪个元素是您不想要的边距的元素。

border: 1px solid red;

只是一些想法。

,

这很可能是由您网站中某处的一些杂散边距或填充引起的。

一个好习惯是将 CSS 顶部的所有元素的边距和内边距重置为 0。

*{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

大佬总结

以上是大佬教程为你收集整理的我的客户端网页左侧有多余的边距全部内容，希望文章能够帮你解决我的客户端网页左侧有多余的边距所遇到的程序开发问题。

如果觉得大佬教程网站内容还不错，欢迎将大佬教程推荐给程序员好友。

本图文内容来源于网友网络收集整理提供，作为学习参考使用，版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ：384754419，请注明来意。
标签：
猜你在找的程序问答相关文章
其他相关热搜词更多
phpJavaPython程序员load中如何string使用参数jquery开发安装listlinuxiosandroid工具javascriptcap