处理“双边距”问题 GUI 元素之间的问题

Question

在创建 GUI 时，我多次遇到“双边距”问题，其中两个元素定义了相同的边距，但最终的间距是我预期的两倍。

我使用的一个解决方案是仅在元素的某些侧面定义边距（例如，如果我希望元素垂直堆叠，则仅在顶部定义边距），但随后我缺少最后一个元素的底部边距。

你如何处理这个问题？ 欢迎任何语言或框架的示例。

Answer 1

某些语言/框架允许您在“布局”本身中设置边距，当您基于每个小部件设置边距时，不会出现双边距问题。

例如，对于 Qt 中的 QLayout，您可以简单地使用 setSpacing(int size); 在布局对象上设置小部件之间的间距，更高级别的布局（如 QGridLayout）允许您执行更复杂的操作。 在 Qt 中，如果您还需要父窗口小部件（可能是顶级窗口）的边缘周围有额外的空间，您可以通过调用 setContentsMargins(int left, int top, int右，底部）； 在那个小部件上。

我想大多数 GUI 工具包都会有类似的结构。

Answer 2

尽管有这个标签，但它确实取决于语言及其 GUI 管理器。 有些允许您设置任意间距（就像您所说的那样）。

我主要接触这个问题是在 CSS 中，因为这就是我日复一日所做的事情。 我让事情变得简单：将块项目向左浮动，并且仅在这些项目上使用左侧边距。

这需要您设置宽度并且并不适用于所有情况（相对/％宽度是最明显的）...但它在很多时候对我有用。 由于内置的​​双边距渲染错误，IE6 在我的生活中可能会带来麻烦，但通常只需简单修复即可。

对于那些不确定问题所在的人：给你想象一个你想在屏幕上显示的盒子。 你想说盒子周围应该有 30px 的边距。 现在想象一下您有两个盒子可以并排显示。 如果您设置绝对 30 像素边距，这些框将相距 60 像素。 求解 x。

Answer 3

Internet Explorer 并不总是正确地折叠边距，因此在我们等待 IE7 使用量缩小时，更安全的方法是在可能的情况下使用填充。

如果仅在元素的某些侧设置边距或填充，则可以在父元素中使用填充来获得到最后一个元素的正确距离。

Answer 4

我有两种策略来处理这个问题：

1）为元素提供单边填充，然后弥补容器 CSS 中第一个/最后一个元素的差异。 例如：

<ul>
   <li>Cats</li>
   <li>Dogs</li>
   <li>Birds</li>
</ul>

ul { padding-bottom: 10px; }
ul li { padding-top: 10px; }

2) 将类添加到 HTML 中的第一个/最后一个元素或使用 jQuery（或其他框架）选择器。 例如：

<ul>
   <li class="first">Cats</li>
   <li>Dogs</li>
   <li class="last">Birds</li>
</ul>

ul { padding-bottom: 10px; }
    ul li { padding-top: 10px; }

$(document).ready(function(){
   $('ul li:last').addClass('last');
});