在非引導頁面中將填充添加到100％寬度div

Question

我已經創建了一個布局，其中div的寬度是給定的100％，並且我想在其中添加填充，但是它破壞了頁面，請參考下面的代碼

的HTML

<div class="main">
  <div class="inner">
    some text
  </div>
</div>

的CSS

.main{
  width:100%;
  padding:10px;
}
.inner{
  width:100%;
}

小提琴鏈接預先感謝

Answer 1

很好地使用div意味着默認情況下它已經是100%寬度，因此，如果您可以刪除width，它將正常工作，但是可能由於某些原因您需要使用width，然后可以使用以下CSS。

的CSS

.main{
  width:100%;
  padding:10px;
  box-sizing:border-box;
}

這將自動減少寬度的填充，您會看到100％的div寬度帶有填充寬度

Answer 2

嘗試從inner刪除width 100%並向該div 演示中添加padding

.main{
  width:100%;     
  background:#000;
}
.inner{
  padding:10px;
  color:#fff;
}

更新：由於您在div中使用#inner ，因此默認情況下其寬度為100% width因此無需指定內部寬度，您可以在此處進行檢查

Answer 3

使用這個CSS

.main{
  padding: 10px;
  width: calc(100% - 20px);
  background:#000;
}

JSFiddle演示

正如GLP所述，您不需要在內部div上指定100％的寬度，因為它是所有塊元素的默認寬度。