宽度 100% 的左右边距答案

【问题标题】：margin left and right on width 100%宽度 100% 的左右边距
【发布时间】：2015-09-04 08:44:43
【问题描述】：

我有一个宽度设置为 100% 的 div。我想设置 20px 左右的边距。出于某种原因，只有左侧被推超过 20 像素。它忽略了权利。这是因为100%吗？

【问题讨论】：

标签： html css

【解决方案1】：

删除宽度。与所有块元素一样，div 将自动扩展以填充可用宽度。当您指定 100% 的宽度时，您是在告诉它与容器的大小相同，而不是填充可用宽度。由于宽度不包括边距，因此在宽度之外指定边距会导致 div 向右移动左边距量，并且右边距存在于屏幕之外。

【讨论】：

【解决方案2】：

一点也不傻。发生的事情是你试图设置一个有点像这样的横幅：（# 是边距）

==========
#--------#
==========

但结果是这样的：

==========
#----------#
==========

让它看起来像这样：

==========
#---------
==========

添加边距不会减小设置的 100% 宽度。

~~您可以尝试使用left:20px; right:20px; 并保留宽度和边距auto~~

编辑
或者只是像其他人建议的那样离开宽度。 :P

【讨论】：

【解决方案3】：

删除 100% width 并且只给它 20px margin 左右，你会没事的。

【讨论】：

【解决方案4】：

div 将使用所有可用空间，除非您开始浮动。删除width 应该没问题。

【讨论】：