左右邊距不一樣

在下面的代碼片段中，您可以看到輸入字段和按鈕的左側邊距比右側更多。他們確實有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>

來源

2016-05-31 maikel

的問題是：你輸入了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>

來源

2016-05-31 14:38:22

謝謝你的快速反應。我看到你刪除了邊距，並在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>

來源

2016-05-31 14:41:31

謝謝你的解釋。我不知道保證金未包含在箱子尺寸模型中。 – maikel

左右邊距不一樣

回答

相關問題