我如何在元素不填充文本的情況下填充元素？

Question

我正在使用響應式設計，使元素的寬度為100％。 元素內有三段文字，我想給文字填充10px，這樣它就不會緊貼屏幕邊緣。

我用overflow-x: hidden; 在手機上，停止在電話瀏覽器上橫向滾動的body, html元素。

當前，當我給容器元素填充10px時，文本從屏幕右側移出。

如何為元素提供10px的填充，100％的寬度以及文本和移動屏幕右邊緣之間的間距為10px？

Answer 1

您可以將以下CSS用於該元素（如果需要，也可以使用所有元素！），

element
{
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box; 
  box-sizing: border-box; /* standard */
}

請參閱，

http://www.paulirish.com/2012/box-sizing-border-box-ftw/