html - deux - supprimer espace entre div




Comment puis-je supprimer l'espace entre les éléments du bloc inline? (20)

Ajouter white-space: nowrap à l'élément conteneur:

CSS:

* {
    box-sizing: border-box;
}
.row {
    vertical-align: top;
    white-space: nowrap;
}
.column{
    float: left;
    display: inline-block;
    width: 50% // Or whatever in your case
}

HTML:

<div class="row">
    <div class="column"> Some stuff</div>
    <div class="column">Some other stuff</div>
</div>

Voici le Plunker .

Compte tenu de ce code HTML et CSS:

span {
    display:inline-block;
    width:100px;
    background-color:palevioletred;
}
<p>
    <span> Foo </span>
    <span> Bar </span>
</p>

En conséquence, il y aura un espace de 4 pixels entre les éléments SPAN.

Démo: http://jsfiddle.net/dGHFV/

Je comprends pourquoi cela arrive, et je sais aussi que je pourrais me débarrasser de cet espace en supprimant l'espace blanc entre les éléments SPAN dans le code source HTML, comme ceci:

<p>
    <span> Foo </span><span> Bar </span>
</p>

Cependant, j'espérais une solution CSS qui ne nécessite pas le code source HTML à falsifier.

Je sais comment résoudre cela avec JavaScript - en supprimant les nœuds de texte de l'élément conteneur (le paragraphe), comme ceci:

// jQuery
$('p').contents().filter(function() { return this.nodeType === 3; }).remove();

Démo: http://jsfiddle.net/dGHFV/1/

Mais ce problème peut-il être résolu avec CSS seul?


Ajouter des commentaires entre les éléments pour ne pas avoir un espace blanc. Pour moi, c'est plus facile que de redéfinir la taille de la police à zéro, puis de la rétablir.

<div>
    Element 1
</div><!--
--><div>
    Element 2
</div>

Avec des parenthèses PHP:

ul li {
  display: inline-block;
}
    <ul>
        <li>
            <div>first</div>
        </li><?
        ?><li>
            <div>first</div>
        </li><?
        ?><li>
            <div>first</div>
        </li>
    </ul>


Bien que, techniquement, pas une réponse à la question: "Comment puis-je supprimer l'espace entre les éléments en bloc-inline?"

Vous pouvez essayer la solution flexbox et appliquer le code ci-dessous et l'espace sera supprimé.

p {
   display: flex;
   flex-direction: row;
}

Vous pouvez en apprendre plus à ce sujet sur ce lien: https://css-tricks.com/snippets/css/a-guide-to-flexbox/


Deux autres options basées sur le module de texte CSS niveau 3 (au lieu de l' white-space-collapsing:discard qui a été supprimé du brouillon):

  • word-spacing: -100%;

En théorie, il devrait faire exactement ce qui est nécessaire - raccourcir les espaces entre les «mots» par 100% de la largeur du caractère espace, c'est-à-dire à zéro. Mais il ne semble malheureusement pas fonctionner nulle part, et cette fonctionnalité est marquée «à risque» (elle peut aussi être supprimée de la spécification).

  • word-spacing: -1ch;

Il raccourcit les espaces inter-mots par la largeur du chiffre '0'. Dans une police à espacement fixe, elle doit être exactement égale à la largeur du caractère espace (et à tout autre caractère). Cela fonctionne dans Firefox 10+, Chrome 27+, et fonctionne presque dans Internet Explorer 9+.

Fiddle


En général, nous utilisons des éléments comme celui-ci dans différentes lignes, mais en cas d' display:inline-block utilisant des balises dans la même ligne supprimera l'espace, mais pas dans une ligne différente.

Un exemple avec des tags dans une ligne différente:

p span {
  display: inline-block;
  background: red;
}
<p>
  <span> Foo </span>
  <span> Bar </span>
</p>

Exemple avec des balises dans la même ligne

p span {
  display: inline-block;
  background: red;
}
<p>
  <span> Foo </span><span> Bar </span>
</p>

Une autre méthode efficace est un travail CSS qui utilise font-size:0 à l'élément parent et donne autant que vous le voulez à font-size à un élément enfant.

p {
  font-size: 0;
}
p span {
  display: inline-block;
  background: red;
  font-size: 14px;
}
<p>
  <span> Foo </span>
  <span> Bar </span>
</p>

Les méthodes ci-dessus peuvent ne pas fonctionner quelque part en fonction de l'application entière, mais la dernière méthode est une solution infaillible pour cette situation et peut être utilisée n'importe où.


J'ai essayé la font-size: 0 solution à un problème similaire dans React et Sass pour un projet de Camp de Code Libre que je suis en train de travailler.

Et il fonctionne!

D'abord, le script:

var ActionBox = React.createClass({
    render: function() {
        return(
            <div id="actionBox">
                </div>
        );
    },
});

var ApplicationGrid = React.createClass({
    render: function() {
        var row = [];
        for(var j=0; j<30; j++){
            for(var i=0; i<30; i++){
                row.push(<ActionBox />);
            }
        }
        return(
            <div id="applicationGrid">
                {row}
            </div>
        );
     },
});

var ButtonsAndGrid = React.createClass({
    render: function() {
        return(
            <div>
                <div id="buttonsDiv">
                </div>
                <ApplicationGrid />
            </div>
        );
    },
});

var MyApp = React.createClass({
    render: function() {
        return(
            <div id="mainDiv">
                <h1> Game of Life! </h1>
                <ButtonsAndGrid />
            </div>
        );
    },
});

ReactDOM.render(
    <MyApp />,
    document.getElementById('GoL')
);

Ensuite, le Sass:

html, body
    height: 100%

body
    height: 100%
    margin: 0
    padding: 0

#mainDiv
    width: 80%
    height: 60%
    margin: auto
    padding-top: 5px
    padding-bottom: 5px
    background-color: DeepSkyBlue
    text-align: center
    border: 2px solid #381F0B
    border-radius: 4px
    margin-top: 20px

#buttonsDiv
    width: 80%
    height: 60%
    margin: auto
    margin-bottom: 0px
    padding-top: 5px
    padding-bottom: 0px
    background-color: grey
    text-align: center
    border: 2px solid #381F0B
    border-radius: 4px
    margin-top: 20px

#applicationGrid
    width: 65%
    height: 50%
    padding-top: 0px
    margin: auto
    font-size: 0
    margin-top: 0px
    padding-bottom: 5px
    background-color: white
    text-align: center
    border: 2px solid #381F0B
    border-radius: 4px
    margin-top: 20px

#actionBox
    width: 20px
    height: 20PX
    padding-top: 0px
    display: inline-block
    margin-top: 0px
    padding-bottom: 0px
    background-color: lightgrey
    text-align: center
    border: 2px solid grey
    margin-bottom: 0px

J'ai eu ce problème en ce moment et de font-size:0; J'ai trouvé que dans Internet Explorer 7 le problème demeure parce que Internet Explorer pense "Taille de police 0?!?! WTF êtes-vous un homme fou?" - Donc, dans mon cas, j'ai le CSS reset d'Eric Meyer et avec font-size:0.01em; J'ai une différence de 1 pixel d'Internet Explorer 7 à Firefox 9, donc, je pense que cela peut être une solution.


Je me suis attaqué à cela récemment et au lieu de définir la font-size:0 parente font-size:0 puis en redéfinissant l'enfant à une valeur raisonnable, j'ai obtenu des résultats cohérents en définissant l' letter-spacing:-.25em conteneur parent letter-spacing:-.25em alors l'enfant retour à l' letter-spacing:normal .

Dans un thread alternatif, j'ai vu un commentateur mentionner que font-size:0 n'est pas toujours idéal car les gens peuvent contrôler les tailles de police minimales dans leurs navigateurs, annulant complètement la possibilité de définir la taille de la police à zéro.

L'utilisation de ems semble fonctionner que la taille de police spécifiée soit 100%, 15pt ou 36px.

http://cdpn.io/dKIjo


Je ne suis pas sûr si vous voulez faire deux travées bleues sans espace ou si vous voulez gérer d'autres espaces blancs, mais si vous voulez supprimer l'espace:

span {
    display: inline-block;
    width: 100px;
    background: blue;
    font-size: 30px;
    color: white;
    text-align: center;

    float: left;
}

Et fait.


Je vais développer un peu la réponse de user5609829 car je crois que les autres solutions ici sont trop compliquées / trop de travail. L'application d'une margin-right: -4px aux éléments du bloc en-ligne supprimera l'espacement et est supportée par tous les navigateurs. Voir le violon mis à jour here . Pour ceux qui sont concernés par l'utilisation de marges négatives, essayez de le lire.


Juste pour le fun: une solution JavaScript facile.

document.querySelectorAll('.container').forEach(clear);

function clear(element) {
  element.childNodes.forEach(check, element);
}

function check(item) {
  if (item.nodeType === 3) this.removeChild(item);
}
span {
  display: inline-block;
  width: 100px;
  background-color: palevioletred;
}
<p class="container">
  <span> Foo </span>
  <span> Bar </span>
</p>


Malheureusement, nous sommes en 2015 et l' white-space-collapse n'est toujours pas implémenté.

En attendant, donnez l'élément parent font-size: 0; et définissez la font-size la font-size sur les enfants. Cela devrait faire l'affaire


Ok, bien que j'ai upvoted à la fois la font-size: 0; et les réponses de not implemented CSS3 feature , après avoir essayé, j'ai découvert qu'aucun d'entre eux n'est une vraie solution .

En fait, il n'y a même pas une solution de contournement sans effets secondaires forts.

Ensuite, j'ai décidé de supprimer les espaces (ce sont les réponses à propos de cet argument) entre les divs inline-block de ma source HTML ( JSP ), en tournant ceci:

<div class="inlineBlock">
    I'm an inline-block div
</div>
<div class="inlineBlock">
    I'm an inline-block div
</div>

pour ça

<div class="inlineBlock">
    I'm an inline-block div
</div><div class="inlineBlock">
    I'm an inline-block div
</div>

c'est moche, mais ça marche.

Mais, attendez une minute ... et si je génère mes divs à l'intérieur des Taglibs loops ( Struts2 , JSTL , etc ...)?

Par exemple:

<s:iterator begin="0" end="6" status="ctrDay">
    <br/>
    <s:iterator begin="0" end="23" status="ctrHour">
        <s:push value="%{days[#ctrDay.index].hours[#ctrHour.index]}">
            <div class="inlineBlock>
                I'm an inline-block div in a matrix 
                (Do something here with the pushed object...)
           </div>
       </s:push>
    </s:iterator>
</s:iterator>

Il n'est absolument pas pensable d'intégrer tout ça, ça voudrait dire

<s:iterator begin="0" end="6" status="ctrDay">
    <br/>
    <s:iterator begin="0" end="23" status="ctrHour"><s:push value="%{days[#ctrDay.index].hours[#ctrHour.index]}"><div class="inlineBlock>
                I'm an inline-block div in a matrix             
                (Do something here with the pushed object...)
           </div></s:push></s:iterator>
</s:iterator>

ce n'est pas lisible, difficile à entretenir et à comprendre, etc ...

La solution que j'ai trouvée:

utiliser les commentaires HTML pour connecter la fin d'une div au début de la suivante!

<s:iterator begin="0" end="6" status="ctrDay">
   <br/>
   <s:iterator begin="0" end="23" status="ctrHour"><!--
    --><s:push value="%{days[#ctrDay.index].hours[#ctrHour.index]}"><!--
        --><div class="inlineBlock>
                I'm an inline-block div in a matrix             
                (Do something here with the pushed object...)
           </div><!--
    --></s:push><!--
--></s:iterator>
</s:iterator>

De cette façon, vous aurez un code lisible et indenté correctement.

Et, comme un effet secondaire positif, la HTML source , bien qu'infestée par des commentaires vides, entraînera correctement indentée;

Prenons le premier exemple, à mon avis:

    <div class="inlineBlock">
        I'm an inline-block div
    </div><!--
 --><div class="inlineBlock">
        I'm an inline-block div
    </div>

c'est mieux que ça

    <div class="inlineBlock">
         I'm an inline-block div
    </div><div class="inlineBlock">
         I'm an inline-block div
    </div>

J'espère que cela pourra aider...


Puisque cette réponse est devenue assez populaire, je la réécris de manière significative.

N'oublions pas la question qui a été posée:

Comment supprimer l'espace entre les éléments en-ligne-bloc ? J'espérais une solution CSS qui ne nécessite pas le code source HTML à falsifier. Ce problème peut-il être résolu avec CSS seul?

Il est possible de résoudre ce problème avec CSS seul, mais il n'y a pas de correctifs CSS complètement robustes.

La solution que j'avais dans ma réponse initiale était d'ajouter font-size: 0 à l'élément parent, puis de déclarer une font-size raisonnable sur les enfants.

http://jsfiddle.net/thirtydot/dGHFV/1361/

Cela fonctionne dans les versions récentes de tous les navigateurs modernes. Cela fonctionne dans IE8. Il ne fonctionne pas dans Safari 5, mais il fonctionne dans Safari 6. Safari 5 est presque un navigateur mort ( 0.33%, août 2015 ).

La plupart des problèmes possibles avec les tailles de police relatives ne sont pas compliqués à résoudre.

Cependant, bien que ce soit une solution raisonnable si vous avez spécifiquement besoin d' une correction CSS, ce n'est pas ce que je recommande si vous êtes libre de changer votre HTML (comme la plupart d'entre nous).

C'est ce que je fais en tant que développeur web expérimenté pour résoudre ce problème:

<p>
    <span>Foo</span><span>Bar</span>
</p>

Oui c'est vrai. Je supprime l'espace dans le HTML entre les éléments en-bloc-inline.

C'est facile. C'est simple. Cela fonctionne partout. C'est la solution pragmatique.

Vous devez parfois considérer avec soin d'où viendra l'espace blanc. Est-ce que l'ajout d'un autre élément avec JavaScript ajoutera des espaces? Non, pas si vous le faites correctement.

Faisons un voyage magique de différentes façons pour supprimer les espaces, avec un nouveau HTML:

<ul>
    <li>Item 1</li>
    <li>Item 2</li>
    <li>Item 3</li>
</ul>
  • Vous pouvez le faire, comme je le fais habituellement:

    <ul>
        <li>Item 1</li><li>Item 2</li><li>Item 3</li>
    </ul>
    

    http://jsfiddle.net/thirtydot/dGHFV/1362/

  • Ou ca:

    <ul>
        <li>Item 1</li
        ><li>Item 2</li
        ><li>Item 3</li>
    </ul>
    
  • Ou, utilisez des commentaires:

    <ul>
        <li>Item 1</li><!--
        --><li>Item 2</li><!--
        --><li>Item 3</li>
    </ul>
    
  • Ou, vous pouvez même ignorer certain balises fermantes (tous les navigateurs sont d'accord):

    <ul>
        <li>Item 1
        <li>Item 2
        <li>Item 3
    </ul>
    

Maintenant que je suis parti et que je t'ai ennuyé à mort avec "mille façons différentes de supprimer les espaces, par thirtydot", j'espère que tu as oublié tout à propos de font-size: 0 .

Alternativement, vous pouvez maintenant utiliser flexbox pour atteindre la plupart des mises en page que vous avez précédemment utilisées en ligne pour: https://css-tricks.com/snippets/css/a-guide-to-flexbox/


Simple:

item {
  display: inline-block;
  margin-right: -0.25em;
}

Il n'est pas nécessaire de toucher l'élément parent.

Seule condition ici: la taille de police de l'élément ne doit pas être définie (doit être égale à la taille de la police du parent).

0.25em est l' word-spacing par défaut

W3Schools - propriété d'espacement des mots



Une autre façon que j'ai trouvée est d'appliquer margin-left comme valeurs négatives sauf le premier élément de la ligne.

span { 
 display:inline-block;
 width:100px;
 background:blue;
 font-size:30px;
 color:white; 
 text-align:center;
 margin-left:-5px;
}
span:first-child{
 margin:0px;
}

Voici la même réponse que j'ai donnée sur le sujet: Affichage: Bloc Inline - Quel est cet espace?

Il existe en fait un moyen très simple de supprimer les espaces du bloc en-ligne, à la fois facile et sémantique. C'est ce qu'on appelle une police personnalisée avec des espaces de largeur nulle, qui vous permet de réduire l'espace (ajouté par le navigateur pour les éléments en ligne lorsqu'ils sont sur des lignes séparées) au niveau de la police en utilisant une très petite police. Une fois que vous avez déclaré la police, il vous suffit de changer la font-family sur le conteneur et de revenir sur les enfants, et le tour est joué. Comme ça:

@font-face{ 
    font-family: 'NoSpace';
    src: url('../Fonts/zerowidthspaces.eot');
    src: url('../Fonts/zerowidthspaces.eot?#iefix') format('embedded-opentype'),
         url('../Fonts/zerowidthspaces.woff') format('woff'),
         url('../Fonts/zerowidthspaces.ttf') format('truetype'),
         url('../Fonts/zerowidthspaces.svg#NoSpace') format('svg');
}

body {
    font-face: 'OpenSans', sans-serif;
}

.inline-container {
    font-face: 'NoSpace';
}

.inline-container > * {
    display: inline-block;
    font-face: 'OpenSans', sans-serif;
}

Costume au goût. Voici un téléchargement de la police que j'ai juste cuit dans font-forge et converti avec le générateur de webfont de FontSquirrel. Ça m'a pris toutes les 5 minutes. La déclaration css @font-face est incluse: police d'espace zippée de largeur nulle . Dans Google Drive, vous devez cliquer sur Fichier> Télécharger pour l'enregistrer sur votre ordinateur. Vous aurez probablement besoin de changer les chemins de police si vous copiez la déclaration dans votre fichier css principal.


taille de police: 0; peut être un peu plus difficile à gérer ...

Je pense que les lignes suivantes sont beaucoup mieux et plus réutilisables, et économisent du temps que n'importe quelle autre méthode. J'utilise personnellement ceci:

.inline-block-wrapper>.inline-block-wrapper,
.inline-block-wrapper{letter-spacing: -4px;}
.inline-block-wrapper>*{letter-spacing: 0;display: inline-block;}

/* OR better shorter name...*/
.items>.items,
.items{letter-spacing: -4px;}
.items>*{letter-spacing: 0;display: inline-block;}

Ensuite, vous pouvez l'utiliser comme suit ...

<ul class="items">
   <li>Item 1</li>
   <li>Item 2</li>
   <li>Item 3</li>
</ul>

Aussi loin que je sache (je peux me tromper) mais tous les navigateurs supportent cette méthode.

EXPLICATION

Cela fonctionne (peut-être -3px peut-être mieux) exactement comme vous l'anticiperiez pour fonctionner.

  • vous copiez et collez le code (une fois)
  • puis sur votre html, utilisez simplement class="items" sur le parent de chaque bloc inline.

Vous n'aurez pas besoin de revenir au CSS et d'ajouter une autre règle CSS pour vos nouveaux blocs en ligne.

Résoudre deux problèmes à la fois.

Notez également que le signe > (supérieur à signe) signifie que * / tous les enfants doivent être en ligne.

http://jsfiddle.net/fD5u3/

Remarque: j'ai modifié pour permettre d'hériter de l'espacement des lettres lorsqu'un wrapper a un wrapper enfant.







css