使左右邊距寬度相同

使左（大）邊距與右邊一樣小的方法是什麼？我知道CSS重置，但仍然無法弄清楚實際的工作方式。使左右邊距寬度相同

<body> 
<div id="quote">Foo</div> 
<p>Foo</p> 
</body> 

<style> 
body { padding-left: 10%; background-color: rgb(255,205,205); } 
#quote { margin-left: -10%; padding-left: 10%; background-color: rgb(205,255,205); } 

/* I can use `calc` as a value, but I understand that it is not 
    the clever way */ 
/* #quote { margin-left: calc(-10% - 16px); } */ 

</style>

問題：

我想執行的行爲：

來源

2016-02-20 john c. j.

爲什麼計算（）不聰明？ – LGSon

-1

全部刪除默認margin和padding其瀏覽器回吐的第一位。

喜歡：

* { 
    margin: 0; 
    padding: 0; 
}

然後，

更改CSS像下面。不需要負餘量。

body { 
    background-color: rgb(255, 205, 205); 
    padding: 0 1%; 
} 

#quote { 
    background-color: rgb(205, 255, 205); 
    padding-left: 10%; 
}

Working Fiddle

來源

2016-02-20 11:04:36 ketan

我不會推薦重置所有**元素的邊距/填充，至少不是沒有完全解釋它會有的效果。 – LGSon

@LGSon它將刪除所有默認的邊距/填充。因此，我們可以按預期給出保證金/填充並獲得預期結果。只要嘗試刪除'* { margin：0; 填充：0; '來自Fiddle的' }。這將需要額外的保證金，但沒有給出 – ketan

我知道它做了什麼，但這不僅會重置，在這種情況下，P和身體，還有所有其他元素，如ul，li，h1-6等，不被要求。 – LGSon

添加到您的風格：

p {margin-left:16px;}

來源

2016-02-20 10:55:28

這裏：

body { background-color: rgb(255,205,205); } 
p { padding-left: 10%; } 
#quote { background-color: rgb(205,255,205); }

來源

2016-02-20 10:59:35

給一個width你的股利和設置margin自動

jsfiddle

body { margin 0;background-color: rgb(255,205,205);} 
#quote { margin:auto; width:95%; background-color: rgb(205,255,205); }

來源

2016-02-20 11:00:31 YounesM

是，這是你想要的嗎？

body {background-color: rgb(255,205,205); } 
 
#quote {margin: 0 1%; padding: 0 10%; background-color: rgb(205,255,205); } 
 
p {margin: 0 1%; padding: 0 13%;}

<div id="quote">Foo</div> 
 
<p>Foo</p>

來源

2016-02-20 11:10:03

body { 
background-color: rgb(255,205,205); 
} 
#quote { 
margin: 0 auto; 
width:90% 
background-color: rgb(205,255,205); 
padding-left:10%; 
} 
p{ 
margin-left:14%; 
}

For Fiddle

來源

2016-02-20 11:15:39 ewtqwerscx

只需編輯百分比即可獲得最佳結果。 – ewtqwerscx

使左右邊距寬度相同

回答

相關問題