Traitement du problème de "double marge" entre les éléments GUI

Question

Lors de la création de GUI, j'ai rencontré plusieurs fois le problème de "double marge", où deux éléments ont la même marge définie et sont espacés deux fois plus loin que prévu. Une solution que j'utilise est de définir la marge sur seulement quelques côtés de l'élément (par exemple, seulement sur le dessus si je m'attends à des éléments à empiler verticalement), mais alors il me manque une marge inférieure pour le dernier élément.

Comment gérez-vous ce problème? Des exemples dans n'importe quelle langue ou cadre sont les bienvenus.

Answer 1

Certaines langues/cadres vous permettent de définir des marges dans une même « mise en page », qui ne serait pas que la question des doubles marges lorsque vous définissez la marge sur un par-widget base. Par exemple, avec QLayout dans Qt, vous pouvez simplement utiliser setSpacing (int size); sur l'objet de mise en page pour définir l'espacement entre les widgets, et les dispositions de niveau supérieur (comme QGridLayout) vous permettent de faire des choses plus complexes. Dans Qt, si vous vouliez également de l'espace autour du bord du widget parent (ce qui pourrait être une fenêtre de niveau supérieur), vous pouvez le définir avec un appel à setContentsMargins (int left, int top, int right, int bottom) ; sur ce widget.

J'imagine que la plupart des kits d'outils GUI auraient des constructions similaires.

Answer 2

Malgré l'étiquette, cela dépend vraiment de la langue et de son gestionnaire d'interface graphique. Certains vous permettent de définir un espacement arbitraire (comme vous parlez).

Ma principale exposition à ce problème est en CSS parce que c'est ce que je fais jour après jour. Je garde les choses simples: laisser flotter les objets de gauche et n'utiliser que des marges de gauche sur ces objets. Cela nécessite de définir des largeurs et ne fonctionne pas pour tout (les largeurs relatives /% étant les plus évidentes) ... Mais ça marche pour moi la plupart du temps. IE6 peut jeter des clés dans mon jour en raison de son bug de rendu à double marge intégré, mais il est généralement tout simplement fixe. Pour ceux qui ne sont pas sûrs de la question posée: vous imaginez une boîte que vous voulez montrer à l'écran. Vous voulez dire que les boîtes devraient avoir une marge de 30px autour d'eux. Maintenant, imaginez que vous avez deux cases à afficher les unes à côté des autres. Si vous définissez une marge absolue de 30px, ces boîtes seront distantes de 60px. Résoudre pour x.

Answer 3

Internet Explorer ne réduit pas les marges correctement tout le temps, alors que nous attendons que l'utilisation d'IE7 pour réduire la méthode la plus sûre consiste à utiliser le remplissage si possible.

Si vous définissez une marge ou un remplissage sur seulement certains côtés des éléments, vous pouvez utiliser un remplissage dans l'élément parent pour obtenir la bonne distance par rapport aux derniers éléments.

Answer 4

J'ai deux tactiques pour faire face à cela:

1) donnent les éléments un rembourrage à sens unique et compenser le premier/dernier élément de divergence dans le CSS pour le conteneur. .: par exemple

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

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

2) Ajouter une classe au premier/dernier élément dans le code HTML ou en utilisant un jQuery (ou un autre cadre) sélecteur. .: par exemple

<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'); 
});