左右边距不一样

问题描述：

在下面的代码片段中，您可以看到输入字段和按钮的左侧边距比右侧更多。他们确实有10px的所有边缘。为什么两边的边距不相等，我该如何解决？左右边距不一样

非常感谢提前。亲切的问候

* { 
 
    box-sizing: border-box; 
 
    padding: 0px; 
 
    margin: 0px; 
 
    font: verdana; 
 
} 
 
html, body { 
 
    font-family: consolas; 
 
    color: #707070 ; 
 
} 
 

 
@media only screen and (min-width: 1000px) { 
 

 
#login_form { 
 
    height: 300px; 
 
    background-color: #F0F0F0; 
 
    border-radius: 10px; 
 
} 
 

 

 
/*CSS responsive*/ 
 
.col-1 {width: 8.33%;} 
 
.col-2 {width: 16.66%;} 
 
.col-3 {width: 25%;} 
 
.col-4 {width: 33.33%;} 
 
.col-5 {width: 41.66%;} 
 
.col-6 {width: 50%;} 
 
.col-7 {width: 58.33%;} 
 
.col-8 {width: 66.66%;} 
 
.col-9 {width: 75%;} 
 
.col-10 {width: 83.33%;} 
 
.col-11 {width: 91.66%;} 
 
.col-12 {width: 100%;} 
 

 
[class*="col-"] { 
 
    float: left; 
 
    padding: 15px; 
 
    /*border: 1px solid red;*/ 
 
} 
 

 
.row::after { 
 
    content: ""; 
 
    clear: both; 
 
    display: block; 
 
} 
 
} 
 

 
.button { 
 
    background-color: #003366; 
 
    border: 0px; 
 
    color: white; 
 
    padding: 10px; 
 
    font-family: consolas; 
 
    font-size: 1.2em; 
 
    border-radius: 5px; 
 
    margin: 10px; 
 
    width: 100%; 
 
} 
 

 
.input { 
 
    padding: 10px; 
 
    border: 0px; 
 
    border-radius: 5px; 
 
    margin: 10px; 
 
    width: 100%; 
 
    font-family: consolas; 
 
    color: #707070; 
 
}

<html> 
 

 
<head> 
 
    <title> 
 
    Index 
 
    </title> 
 

 
    <meta name="viewport" content="width=device-width, initial-scale=1.0"> 
 
    <link rel="stylesheet" type="text/css" href="style.css" /> 
 
</head> 
 

 
<body> 
 

 
    <div class="row"> 
 
    <div class="col-3"></div> 
 
     <div class="col-6" id="login_form"> 
 
     <form action="" method="" name=""> 
 
      E-mail:<br /> 
 
      <input type="text" name="login_email" value="" class="input" /><br /> 
 
      Password:<br /> 
 
      <input type="password" name="login_password" value="" class="input"/><br /> 
 
      <button class="button">Log in</button> 
 
     </form> 
 
     </div> 
 

 
    </div> 
 

 
</body> 
 
</html>

答

的问题是：你输入了100％，宽度20像素的多填充和20像素的保证金。这导致超过100％。这就是为什么它在右侧更大。

* { 
 
    box-sizing: border-box; 
 
    padding: 0px; 
 
    margin: 0px; 
 
    font: verdana; 
 
} 
 
html, body { 
 
    font-family: consolas; 
 
    color: #707070 ; 
 
} 
 

 
@media only screen and (min-width: 1000px) { 
 

 
#login_form { 
 
    height: 300px; 
 
    background-color: #F0F0F0; 
 
    border-radius: 10px; 
 
} 
 

 

 
/*CSS responsive*/ 
 
.col-1 {width: 8.33%;} 
 
.col-2 {width: 16.66%;} 
 
.col-3 {width: 25%;} 
 
.col-4 {width: 33.33%;} 
 
.col-5 {width: 41.66%;} 
 
.col-6 {width: 50%;} 
 
.col-7 {width: 58.33%;} 
 
.col-8 {width: 66.66%;} 
 
.col-9 {width: 75%;} 
 
.col-10 {width: 83.33%;} 
 
.col-11 {width: 91.66%;} 
 
.col-12 {width: 100%;} 
 

 
[class*="col-"] { 
 
    float: left; 
 
    padding: 15px; 
 
    /*border: 1px solid red;*/ 
 
} 
 

 
.row::after { 
 
    content: ""; 
 
    clear: both; 
 
    display: block; 
 
} 
 
} 
 

 
.input-wrapper, 
 
.button-wrapper { 
 
    padding: 10px; 
 
} 
 
.button { 
 
    background-color: #003366; 
 
    border: 0; 
 
    color: white; 
 
    padding: 10px 0; 
 
    font-family: consolas; 
 
    font-size: 1.2em; 
 
    border-radius: 5px; 
 
    width: 100%; 
 
} 
 

 
.input { 
 
    box-sizing: border-box; 
 
    padding: 10px; 
 
    border: 0; 
 
    border-radius: 5px; 
 
    width: 100%; 
 
    font-family: consolas; 
 
    color: #707070; 
 
}

<html> 
 

 
<head> 
 
    <title> 
 
    Index 
 
    </title> 
 

 
    <meta name="viewport" content="width=device-width, initial-scale=1.0"> 
 
    <link rel="stylesheet" type="text/css" href="style.css" /> 
 
</head> 
 

 
<body> 
 

 
    <div class="row"> 
 
    <div class="col-3"></div> 
 
     <div class="col-6" id="login_form"> 
 
     <form action="" method="" name=""> 
 
      E-mail: 
 
      <div class="input-wrapper"> 
 
      <input type="text" name="login_email" value="" class="input" /> 
 
      </div> 
 
      Password: 
 
      <div class="input-wrapper"> 
 
      <input type="password" name="login_password" value="" class="input"/> 
 
      </div> 
 
      <div class="button-wrapper"> 
 
      <button class="button">Log in</button> 
 
      </div> 
 
     </form> 
 
     </div> 
 

 
    </div> 
 

 
</body> 
 
</html>

谢谢你的快速反应。我看到你删除了边距，并在input-div周围创建了一个包装来处理填充。你能解释为什么不能使用保证金？ – maikel

您可以在该包装器中使用边距而不是填充。无论如何，它必须始终在一个包装。问题是你无法将100％的宽度与边距混合在一起，或者总是导致超过100％。 –

答

问题是margin不包括在边界盒大小的模型。它是分开的。所以元素是100％width，加上在每一边的的10px。实际上并不是左侧有更多的间距，而是正确的margin不在可见页面上。只需从两个元素中删除margin，并且应该设置。请参见下面的代码片段：

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

 
html, body { 
 
    font-family: consolas; 
 
    color: #707070 ; 
 
} 
 

 
@media only screen and (min-width: 1000px) { 
 

 
#login_form { 
 
    height: 300px; 
 
    background-color: #F0F0F0; 
 
    border-radius: 10px; 
 
} 
 

 
/*CSS responsive*/ 
 
.col-1 {width: 8.33%;} 
 
.col-2 {width: 16.66%;} 
 
.col-3 {width: 25%;} 
 
.col-4 {width: 33.33%;} 
 
.col-5 {width: 41.66%;} 
 
.col-6 {width: 50%;} 
 
.col-7 {width: 58.33%;} 
 
.col-8 {width: 66.66%;} 
 
.col-9 {width: 75%;} 
 
.col-10 {width: 83.33%;} 
 
.col-11 {width: 91.66%;} 
 
.col-12 {width: 100%;} 
 

 
[class*="col-"] { 
 
    float: left; 
 
    padding: 15px; 
 
    /*border: 1px solid red;*/ 
 
} 
 

 
.row::after { 
 
    content: ""; 
 
    clear: both; 
 
    display: block; 
 
} 
 

 
.button { 
 
    background-color: #003366; 
 
    border: 0px; 
 
    color: white; 
 
    padding: 10px; 
 
    font-family: consolas; 
 
    font-size: 1.2em; 
 
    border-radius: 5px; 
 
    margin: 10px 0; 
 
    width: 100%; 
 
} 
 

 
.input { 
 
    padding: 10px; 
 
    border: 0px; 
 
    border-radius: 5px; 
 
    margin: 10px 0; 
 
    width: 100%; 
 
    font-family: consolas; 
 
    color: #707070; 
 
}

<html> 
 

 
<head> 
 
    <title> 
 
    Index 
 
    </title> 
 

 
    <meta name="viewport" content="width=device-width, initial-scale=1.0"> 
 
    <link rel="stylesheet" type="text/css" href="style.css" /> 
 
</head> 
 

 
<body> 
 

 
    <div class="row"> 
 
    <div class="col-3"></div> 
 
     <div class="col-6" id="login_form"> 
 
     <form action="" method="" name=""> 
 
      E-mail:<br /> 
 
      <input type="text" name="login_email" value="" class="input" /><br /> 
 
      Password:<br /> 
 
      <input type="password" name="login_password" value="" class="input"/><br /> 
 
      <button class="button">Log in</button> 
 
     </form> 
 
     </div> 
 

 
    </div> 
 

 
</body> 
 
</html>

谢谢你的解释。我不知道保证金未包含在箱子尺寸模型中。 – maikel

相关推荐