顶部和侧面的 CSS 边距间距不同
我希望有人能帮助我，因为我觉得在这里问这样的问题很愚蠢。我不是网页设计师，但一直致力于创建基本布局的任务。该布局将在具有标准浏览器的集成设备上使用，因此某些浏览器特定的CSS标签..即：-moz-border-radius不一定需要与IE等一起使用。
我有一个 1024x768 的页面，我想在其中包含一些块部分。这些部分每边都有 4px 的空间。因此，一个 2x2 的网格在整个网站的外部应该有 4px 的间隙（黑色），而内部的盒子之间应该有 8px 的间隙（一个盒子的右侧 4px，左侧 4px，或者盒子底部 4px）。一个，顶部 4px，等）
当我将每个 div 的 CSS 设置为 margin: 4px;我得到的外部间隙为 4px。我还得到了盒子左右两侧之间 8px 的水平间隙。问题在于垂直间距为 4px，就像其中一个四分之一框没有应用顶部或底部边距一样。我不认为这是应该发生的事情，所以我想我在某个地方犯了错误。
预先感谢——这个地方太棒了。
I hope someone can help me, as I feel rather dumb for asking such a question here. I am not a web designer, but have been stuck with a task of creating a basic layout. The layout will be used on an integrated device with a standard browser, so some of the browser specific CSS tags .. i.e: -moz-border-radius will not necesarily need to work with IE and such.
I have a 1024x768 page that I want to have a few block sections on. These sections will have 4px of space on every side. So a 2x2 grid should have 4px gap(black) on the outside of the whole site, while the insides have 8px gap between the boxes (4px on the right side of one box, and 4px on the left, or 4px on the bottom of one, and 4px on the top, et)
When I set each of these div's CSS to margin: 4px; I get the outside gap of 4px. I also get a horizontal gap of 8px between the left and right sides of the boxes. The problem is that the vertical spacing is 4px, like one of the quarter boxes is not applying a top or bottom margin. I don't think this is something that is supposed to happen, so I figure I made a mistake somewhere.
Thanks in advance -- this place is awesome.
如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱，如果其他用户或者作者回复了您的评论，将不能在第一时间通知您！
发布评论
评论（2）
这是由于“边距折叠”：在最简单的情况下，最小的相邻垂直边距被忽略。
That's due to 'margin collapsing': the smallest adjacent vertical margin is ignored in the most simple case.
尝试使用填充而不是边距。
两个对象之间的最大边距用作它们之间的空间。
如果
object_a的边距为 4，而object_b的边距为 6，如果您并排放置它们，它们的边距将为 6。如果您使用 padding ，它在它们周围创建了更多的气泡，并结合了距离。
如果
object_a的内边距为 4，而object_b的内边距为 6，如果您并排放置它们，它们的内边距将为 10。更新 - 谢谢致@Bobby Jack
水平边距永远不会塌陷。仅垂直。
Try using padding instead of margin.
The largest margin between two objects is used as the space between them.
If
object_ahas a margin of 4, andobject_bhas a margin of 6, if you place them side by side, they will have a margin of 6.If you use padding, it creates more of a bubble around them, and combines the distance.
If
object_ahas a padding of 4, andobject_bhas a padding of 6, if you place them side by side, they will have a padding of 10.UPDATE -- thanks to @Bobby Jack
Horizontal margins never collapse. Only vertical.