Question

我正在为服务器创建商店，该商店仅允许编辑我正在执行的css，但是在商店中，屏幕的右侧，顶部和底部都有巨大的空白。

我试图寻找CSS解决方案，但没有一个能解决问题。

我该如何解决？

网站：http://purgepvp-mc.tebex.io/?theme=174117

** CSS *：*

        @import url(http://fonts.googleapis.com/css?family=Lato;
    @import url(http://fonts.googleapis.com/css?family=Futura);

    .header {

        background-size: cover;
        padding: 20px;
        margin: 0;
        background-image: url("https://i.imgur.com/eFt7yL2.jpg");        

    }

    .progress-bar {

      background-color: #592e89  

    }

    body > .container {
        width: 100% !important;
        padding: 0 !important;
        background: #757575;
    }


    .panel-heading {

        border-radius: 0px !important;
        border: 0px !important;
        height: 40px !important;
        background-color: #592e89 !important;
        color: #FFF !important;
        border-radius: 0px !important;


    }

    .logo {





    }

    .panel {

        border: none !important;
        border-radius: 0px !important;


    }

    .panel-body {


        color: #FFF !important;
        border-radius: 0px !important;
        background-color: #3a3a3a;

    }


    .content {


        border: none !important;


    }

    .navbar {

        border-radius: 1px;
        color: white;
        background-color: #592e89;
        border: none !important;

    }


    .donation-goal {

        font-weight: bold;

    }

    .nav {
        margin: 0 auto;
        text-align: center;
        display: block;
        width: max-content;
        float: initial;'
        font-weight: bold;'

    }

    .nav a, .nav li {
        color: #FFF !important;
        transition: all 0.2s linear;
        text-decoration: none !important;
        font-weight: bold;
    }



    .nav li:hover, .nav li:hover a {
        background-color: #3a3a3a;
        color: #FFF !important;
        text-decoration: none !important;
        border-radius: 20px;
        font-weight: bold;

    }






    @-webkit-keyframes pulse {
      0% {
        -webkit-transform: scale(1);
      }
      50% {
        -webkit-transform: scale(1.1);
      }
      100% {
        -webkit-transform: scale(1);
      }
    }

    @keyframes pulse {
      0% {
        transform: scale(1);
      }
      50% {
        transform: scale(1.1);
      }
      100% {
        transform: scale(1);
      }
    }




    .logo img {
        content: url('https://i.imgur.com/S7Lfi8X.jpg');
        height: initial !important;
        width: 600px;
        margin: 0 auto;
        display: block;
    }

    .logo {
        width: 100% !important;
      animation: pulse 3s infinite;
      margin: 0 auto;
      display: table;
      margin-top: 50px;
      animation-direction: alternate;
      -webkit-animation-name: pulse;
      animation-name: pulse;
    }



    .footer {

        border-top: 5px solid #592e89;
        background-color: #3a3a3a;
        padding-bottom: 30px;
        font-weight: bold;

    }

Answer 1

默认情况下有可用边距，例如

<head>
   title scripts etc.
</head>
<body>
    <header class="...">your html</header>
    <div class="..."></div>
</body>

给主体一个id或一个类，并在主体类或硬代码中使margin = 0

<body style="margin:0;">
    <header class="...">your html</header>
    <div class="..."></div>
</body>

这将防止出现空白。

Answer 2

您的徽标导致了此情况。添加此CSS

body .container {
  overflow-x: hidden;
}

.container .body {
  margin-right:0px;
  margin-left:0px;
}

body {
  margin-top: 0px !important; /*in your syle.min.css, it makes the margin-top:20px*/
}

如何删除网站的这些空白？

2 个答案: