處理GUI元素之間的「雙邊距」問題

Question

在創建GUI時，我遇到過幾次「雙邊距」問題，其中兩個元素具有相同的邊距定義，並最終以兩倍於意。

我使用的一種解決方案是僅在元素的某些邊上定義邊距（例如，如果我期望元素垂直堆疊，則只在頂部），但是後面我缺少最後一個底部邊距元件。

你如何處理這個問題？任何語言或框架的例子都是受歡迎的。

Answer 1

有些語言/框架，讓你當你設置一個每個小部件基礎上邊距設置頁邊距在「佈局」本身，這不會有雙重利潤的問題。例如，在Qt中使用QLayout，你可以簡單地使用setSpacing（int size）;在佈局對象上設置小部件之間的間距，以及更高級別的佈局（如QGridLayout）允許您執行更復雜的事情。在Qt中，如果您還希望在父窗口小部件（可能是頂級窗口）的邊緣附近有額外的空間，您可以通過調用setContentsMargins（int left，int top，int right，int bottom） ;在那個小部件上。

我會想象大多數GUI工具包會有類似的結構。

Answer 2

儘管標籤，它確實取決於語言和它的GUI管理器。有些允許你設置任意間距（就像你在談論的那樣）。

我對這個問題的主要接觸是在CSS中，因爲這就是我每天都在做的事情。我將事情保持簡單：浮動塊項目留下，只在這些項目上使用左手邊距。

這需要你設置寬度並且不適用於所有事情（相對/％寬度是最明顯的）......但它在很多時候都適用於我。 IE6 可以由於其內置的雙邊距渲染錯誤而在我的日子裏拋出扳手，但它通常只是固定的。

對於那些不確定問題提出的問題：想象您想要在屏幕上顯示的框。你想說的是盒子周圍應該有30px的邊距。現在想象你有兩個盒子可以相互顯示。如果您設置絕對30像素的邊距，那麼這些邊框的間距將爲60px。解決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'); 
});