html - vertical - supprimer espace entre div




Pourquoi y a-t-il un écart inexplicable entre ces éléments div inline-block? (4)

Dans ce cas, vos éléments div ont été remplacés par block éléments de niveau block . Une caractéristique typique des éléments en inline est qu'ils respectent les espaces dans le balisage. Ceci explique pourquoi un espace est créé entre les éléments. (example)

Il existe quelques solutions qui peuvent être utilisées pour résoudre ce problème.

Méthode 1 - Supprimer les espaces du balisage

Exemple 1 - Commenter les espaces blancs: (example)

<div>text</div><!--
--><div>text</div><!--
--><div>text</div><!--
--><div>text</div><!--
--><div>text</div>

Exemple 2 - Supprimer les sauts de ligne: (example)

<div>text</div><div>text</div><div>text</div><div>text</div><div>text</div>

Exemple 3 - Fermer une partie de l'étiquette sur la ligne suivante (example)

<div>text</div
><div>text</div
><div>text</div
><div>text</div
><div>text</div>

Exemple 4 - Fermez l'ensemble de la balise sur la ligne suivante: (example)

<div>text
</div><div>text
</div><div>text
</div><div>text
</div><div>text
</div>

Méthode 2 - Réinitialiser la font-size la font-size

Étant donné que l'espace entre les éléments en inline est déterminé par la font-size la font-size , vous pouvez simplement réinitialiser la font-size de font-size à 0 et ainsi supprimer l'espace entre les éléments.

Définissez simplement font-size: 0 sur les éléments parents, puis déclarez une nouvelle font-size de font-size pour les éléments enfants. Cela fonctionne, comme démontré ici (example)

#parent {
    font-size: 0;
}

#child {
    font-size: 16px;
}

Cette méthode fonctionne plutôt bien, car elle ne nécessite pas de modification du balisage; cependant, cela ne fonctionne pas si la font-size de font-size l'élément enfant est déclarée en utilisant des unités em . Je recommande donc de supprimer les espaces du balisage, ou de faire flotter les éléments et d'éviter ainsi l'espace généré par inline éléments en inline .

Méthode 3 - Définir l'élément parent à display: flex

Dans certains cas, vous pouvez également définir l' display de l'élément parent sur flex . (example)

Cela supprime efficacement les espaces entre les éléments dans les navigateurs pris en charge . N'oubliez pas d'ajouter des préfixes de fournisseurs appropriés pour un support supplémentaire.

.parent {
    display: flex;
}
.parent > div {
    display: inline-block;
    padding: 1em;
    border: 2px solid #f00;
}

.parent {
    display: flex;
}
.parent > div {
    display: inline-block;
    padding: 1em;
    border: 2px solid #f00;
}
<div class="parent">
    <div>text</div>
    <div>text</div>
    <div>text</div>
    <div>text</div>
    <div>text</div>
</div>

Notes de côtés:

Il est incroyablement peu fiable d'utiliser des marges négatives pour supprimer l'espace entre inline éléments en inline . Veuillez ne pas utiliser de marges négatives s'il existe d'autres solutions plus optimales.

J'ai deux éléments div inline-block, qui sont les mêmes, positionnés l'un à côté de l'autre. Cependant, il semble y avoir un espace mystérieux de 4 pixels entre les deux divs, même si la marge est mise à 0. Il n'y a pas de divs parents qui les effectuent - Que se passe-t-il?

CSS

#container
{
    display:inline-block;
    position:relative;
    background:rgb(255,100,0);
    margin:0px;
    width:40%;
    height:100px;
}

C'est ce que je veux qu'il ressemble:


J'ai trouvé une solution qui n'impliquait pas Flex, car Flex ne fonctionne pas dans les anciens navigateurs. Exemple:

.container {
    display:block;
    position:relative;
    height:150px;
    width:1024px;
    margin:0 auto;
    padding:0px;
    border:0px;
    background:#ececec;
    margin-bottom:10px;
    text-align:justify;
    box-sizing:border-box;
    white-space:nowrap;
    font-size:0pt;
    letter-spacing:-1em;
}

.cols {
    display:inline-block;
    position:relative;
    width:32%;
    height:100%;
    margin:0 auto;
    margin-right:2%;
    border:0px;
    background:lightgreen;  
    box-sizing:border-box;
    padding:10px;
    font-size:10pt;
    letter-spacing:normal;
}

.cols:last-child {
    margin-right:0;
}

Vous devez ajouter

#container
{
    display:inline-block;
    position:relative;
    background:rgb(255,100,0);
    margin:0px;
    width:40%;
    height:100px;
    margin-right:-4px;
}

parce que chaque fois que vous écrivez display:inline-block cela prend une margin-right:4px supplémentaire margin-right:4px . Donc, vous devez l'enlever.


il suffit d'ajouter une bordure: 2px solid #e60000 ; à votre 2ème balise CSS.

Certainement cela fonctionne

#Div2Id {
    border: 2px solid #e60000; --> color is your preference
}




padding