父部門右側的額外填充

我寫了一些純CSS，html代碼，它是div寬度的80％，我在其中一行放置了3個其他的盒子，這些盒子是父寬度的30％。 但是在父div的右邊還有一個額外的填充，我不能處理到目前爲止。 有人可以給我一個提示將其刪除嗎？父部門右側的額外填充

這裏是它的照片

並滿足下列代碼。

<!doctype html> 
<html> 
<head> 
    <title>CSS practice</title> 
    <style> 
     *{ 
      margin: 0; 
      padding: 0; 
      } 
     body { 
       background-color: grey; 
       } 
     .main { 
       padding: 0; 
       margin: 0 auto; 
       width: 80%; 
       background-color: #AAA; 
       } 
     .container { 
        display: inline-block; 
        width: 30%; 
        height: 30%; 
        margin: 1%; 
        background-color: white; 
        text-align: center; 
        } 
    </style> 
    </head> 
    <body> 
     <div class="main"> 
          <span class="container">X</span> 
          <span class="container">X</span> 
          <span class="container">X</span> 
          <span class="container">X</span> 
          <span class="container">X</span> 
          <span class="container">X</span> 
     </div> 
    </body> 
</html>

來源

2015-12-21 Ali Saberi

微胖？你確定？我沒有看到！ https://jsfiddle.net/eylay/v2x3Lwej/3/ –

@AliSeyfi。請看右側的灰色方塊。我想這不是保證金。正如您可以看到右側的白色框的距離，它小於左側的燈箱與父邊框的距離。 –

將text-align:center加到.main類。
當您將text-align:center添加到.container時，只有X進入中心位置，但如果您想將框放在中間，則應該將text-align:center添加到父div。

JSFiddle link

來源

2015-12-21 22:34:30

Sesfi：聽起來好像開始運作良好。謝謝 –

不客氣！（伊朗hasti dg？） –

@Seyfi：是的（Areh，merci） –

寬度加上左，你.container元素的右頁邊距所以沒有多餘的空間加起來也沒到100％。我在下面的代碼中添加了一些註釋。

*{ 
 
    margin: 0; 
 
    padding: 0; 
 
} 
 
body { 
 
    background-color: grey; 
 
} 
 
.main { 
 
    padding: 0; 
 
    margin: 0 auto; 
 
    width: 80%; 
 
    background-color: #AAA; 
 
} 
 
/* clearfix to keep container from collapsing when floating child elements */ 
 
.main:before, 
 
.main:after { 
 
    content: ""; 
 
    display: table; 
 
    clear: both; 
 
} 
 
.container { 
 
    /*display: inline-block; 
 
    width: 30%;*/ 
 
    float: left; 
 
    width: calc(100%/3 - 2%); /* divide by number of columns and subtract the left and right margins */ 
 
    height: 30%; 
 
    margin: 1%; 
 
    background-color: white; 
 
    text-align: center; 
 
}

<div class="main"> 
 
    <span class="container">X</span> 
 
    <span class="container">X</span> 
 
    <span class="container">X</span> 
 
    <span class="container">X</span> 
 
    <span class="container">X</span> 
 
    <span class="container">X</span> 
 
</div>

來源

2015-12-21 22:42:28

這是專業觀點感謝 –

父部門右側的額外填充

回答

相關問題