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

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/