Comment rendre la mise en page HTML espace-agnostique?

EDIT: Il ya presque la même question à Removing whitespace between HTML elements when using line breaks, mais en dehors de la suggestion "float" je ne trouve aucune des réponses appropriées à mes besoins. Je voudrais que cela reste ouvert pour des suggestions plus innovantesComment rendre la mise en page HTML espace-agnostique?

Si vous avez inline-block s consécutifs devient important. Il ajoute un certain niveau d'espace entre les éléments. Quelle est la manière «correcte» d'éviter l'effet d'espace sur la mise en page HTML si vous voulez que ces blocs semblent collés les uns aux autres?

Exemple:

<span>a</span> 
<span>b</span>

Cela rend différemment:

<span>a</span><span>b</span>

en raison de l'espace inbetween. Je veux que l'effet d'espace disparaisse sans compromettre la disposition du code source HTML. Je veux que mes modèles HTML restent propres et bien découpés.

Je pense que ces options sont laids:

1) Peaufiner text-indent, margin, padding etc. (parce qu'il dépendrait de la taille de la police, default largeur des espaces blancs, etc.)

2) Mettre tout sur une seule ligne, l'un à côté de l'autre.

3) Zéro font-size. Cela nécessiterait de surcharger la taille des polices en blocs, qui seraient autrement héritées.

4) Solutions possibles dans l'ensemble du document. Je veux que la solution reste locale pour un certain bloc de HTML.

Des idées, des points évidents qui me manquent?

Source

2010-04-07 Sedat Kapanoglu

Vous ne devriez pas utiliser la version sans espace entre les éléments, faites tout simplement fonctionner avec de l'espace. Vous devrez probablement définir les éléments en ligne sur display:block pour obtenir la mise en page correcte. Regardez le this similar question of mine, qui a de bonnes réponses.

Edit: L'une des réponses sur la question ci-dessus suggère d'utiliser des commentaires HTML en dernier recours, par exemple .:

<span>a</span><!-- 
--><span>b</span>

Source

2010-04-07 21:30:59 Skilldrick

Comment faites-vous avec 'block's sans spécifier des valeurs absolues et avec des espaces blancs? –

Oh n'a pas pu trouver l'autre question, merci pour le lien. Il semble que float est la manière établie de le faire. –

J'ai eu ce même problème avec un plugin récent que je développais. Comme j'utilisais inline-block, et puisque le plugin nécessitait un espace absolument nul entre les éléments, et que je ne connaissais pas les éléments, je devais trouver une solution qui ne nécessitait aucune intervention de l'utilisateur.

Voici:

function removeWhiteSpace(raw) { 
    var cleaned_string = raw.replace(/[\r+\n+\t+]\s\s+/g, ""); 
    return cleaned_string; 
}

Javascript semble être la seule véritable solution à la question. Je tire les données HTML en utilisant jQuery, puis exécute cette fonction pour le nettoyer.

Source

2010-04-07 21:31:15 dclowd9901

Je m'abstiendrais d'y aller parce que la manipulation du DOM JavaScript est très coûteuse (déclenche les mises à jour du DOM, le calcul de la mise en page et le repeindre), en particulier sur les appareils mobiles. Float a bien fonctionné dans mon cas. –

si votre problème est les espaces blancs redondants ou divisions détachées/en utilisant "ul" avec css approprié peut faire votre travail/

ofcourse il y a reset.css/

html:

<ul id="uList"> 
<li><img src="#" alt="img"/></li> 
<li><img src="#" alt="img"/></li> 
<li><img src="#" alt="img"/></li> 
<li><img src="#" alt="img"/></li> 
</ul>

css:

ul#uList, ul#uList li, ul#uList li img{display:block; float:left;}

Source

2010-04-08 00:15:24 spielersun

Ceci n'est pas lié à UL ou LI. C'est en fait "float" qui résout le problème ici. (voir l'autre question) –

Vous pouvez également utiliser word-spacing:

<!DOCTYPE html> 
<html lang="en"> 
<meta charset="UTF-8"> 
<title>Inline-blocks without whitespace between</title> 
<style> 
html, 
body 
    { 
     background:  #fff; 
     padding:  0; 
     margin:   0; 
    } 
p 
    { 
     background:  #9ab; 
     text-align:  center; 
     margin:   50px; 
     padding:  0 20px; 

     word-spacing: -.3em; 
    } 
span 
    { 
     display:  inline-block; 
     padding:  3px; 
     color:   #def; 
     background:  #678; 
     word-spacing: normal; 
    } 
@media screen and (-webkit-min-device-pixel-ratio:0) 
{ 
    /** 
    * Since WebKit fails on word-spacing for 
    * inline-block … we have to hack. 
    */ 
    span 
     { 
      margin:   0 -.2em; 
     } 
} 
</style> 

<p> 
    <span>Inline-block<br>number 1</span> 
    <span>Inline-block<br>number 2</span> 
    <span>Inline-block<br>number 3</span> 
</p>

Live demo

Source

2010-04-08 03:03:06 fuxia

C'est bien mais cela ne semble pas très différent de spécifier la marge/padding/indent. Que signifie "-3em"? Et qu'est-ce que cela signifiera quand je changerai la police utilisée dans le bloc? –

'.3em' est l'espace que les navigateurs web prennent habituellement pour un espace blanc normal. Vous pouvez prendre pour les blocs en ligne n'importe quelle police que vous souhaitez - l'espacement des mots est calculé à partir de la police 'p'. La différence principale avec 'margin' ou' text-indent' est visible lorsque les blocs en ligne entrent en collision avec le bord de leur élément parent: une marge négative les pousse hors de la boîte parent. Et «rembourrage» ne peut pas résoudre votre problème de toute façon. – fuxia

Comment rendre la mise en page HTML espace-agnostique?

Répondre

Questions connexes