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

Question

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

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

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

Answer 1

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

例如，使用 Qt 中的 QLayout，您可以简单地使用 setSpacing(int size);在布局对象上设置小部件之间的间距，更高级别的布局（如 QGridLayout）允许您做更复杂的事情。在 Qt 中，如果您还希望在父窗口小部件（可能是顶级窗口）的 edge 周围有额外的空间，则可以通过调用 setContentsMargins(int left, int top, int对，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');
});