html tag Wie entferne ich den Abstand zwischen Inline-Block-Elementen?




title tags bilder (24)

Für CSS3-konforme Browser gibt es white-space-collapsing:discard

siehe: http://www.w3.org/TR/2010/WD-css3-text-20101005/#white-space-collapsing

Angesichts dieser HTML und CSS:

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

Als Ergebnis wird zwischen den SPAN-Elementen ein vier Pixel breiter Raum sein.

Demo: http://jsfiddle.net/dGHFV/

Ich verstehe, warum das passiert, und ich weiß auch, dass ich diesen Raum loswerden könnte, indem ich den Leerraum zwischen den SPAN-Elementen im HTML-Quellcode entferne:

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

Ich habe jedoch auf eine CSS-Lösung gehofft, bei der der HTML-Quellcode nicht manipuliert werden muss.

Ich weiß, wie ich das mit JavaScript lösen kann - indem ich die Textknoten aus dem Containerelement (dem Absatz) entferne, so:

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

Demo: http://jsfiddle.net/dGHFV/1/

Aber kann dieses Problem nur mit CSS gelöst werden?


Jede Frage, die versucht, den Abstand zwischen inline-block zu entfernen, erscheint mir wie ein <table> ...

Versuchen Sie etwas wie folgt:

p {
  display: table;
}
span {
  width: 100px;
  border: 1px solid silver; /* added for visualization only*/
  display: table-cell;
}
<p>
  <span> Foo </span>
  <span> Bar </span>
</p>


display: flex; zum übergeordneten Element. Hier ist die Lösung mit einem Präfix:

p {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
}
span {
  float: left;
  display: inline-block;
  width: 100px;
  background: blue;
  font-size: 30px;
  color: white;
  text-align: center;
}
<p>
  <span> Foo </span>
  <span> Bar </span>
</p>


Da diese Antwort ziemlich populär geworden ist, schreibe ich sie jetzt neu.

Vergessen wir nicht die eigentliche Frage, die gestellt wurde:

Wie entferne ich den Abstand zwischen Inline-Block-Elementen ? Ich habe auf eine CSS-Lösung gehofft, bei der der HTML-Quellcode nicht manipuliert werden muss. Kann dieses Problem mit CSS allein gelöst werden?

Es ist möglich, dieses Problem mit CSS allein zu lösen, aber es gibt keine vollständig robusten CSS-Fixes.

Die Lösung, die ich in meiner ersten Antwort hatte, war, font-size: 0 zum übergeordneten Element hinzuzufügen und dann eine vernünftige font-size für die untergeordneten Elemente anzugeben.

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

Dies funktioniert in neueren Versionen aller modernen Browser. Es funktioniert in IE8. Es funktioniert nicht in Safari 5, aber es funktioniert in Safari 6. Safari 5 ist fast ein toter Browser ( 0.33%, August 2015 ).

Die meisten Probleme mit relativen Schriftgrößen sind nicht kompliziert zu beheben.

Obwohl dies eine vernünftige Lösung ist, wenn Sie speziell einen CSS-Fix brauchen , ist es nicht das, was ich empfehle, wenn Sie Ihren HTML-Code ändern können (wie die meisten von uns).

Dies ist es, was ich als einigermaßen erfahrener Webentwickler tatsächlich tue, um dieses Problem zu lösen:

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

Ja, das ist richtig. Ich entferne den Whitespace im HTML zwischen den Inline-Blockelementen.

Es ist einfach. Es ist einfach. Es funktioniert überall. Es ist die pragmatische Lösung.

Sie müssen manchmal sorgfältig überlegen, woher Whitespace kommt. Fügt ein anderes Element mit JavaScript Whitespace hinzu? Nein, nicht wenn du es richtig machst.

Lass uns auf eine magische Reise verschiedener Wege gehen, um den Whitespace mit etwas neuem HTML zu entfernen:

<ul>
    <li>Item 1</li>
    <li>Item 2</li>
    <li>Item 3</li>
</ul>
  • Sie können dies tun, wie ich es normalerweise tue:

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

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

  • Oder dieses:

    <ul>
        <li>Item 1</li
        ><li>Item 2</li
        ><li>Item 3</li>
    </ul>
    
  • Oder benutze Kommentare:

    <ul>
        <li>Item 1</li><!--
        --><li>Item 2</li><!--
        --><li>Item 3</li>
    </ul>
    
  • Oder Sie können certain schließende Tags sogar ganz überspringen (alle Browser sind damit einverstanden):

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

Jetzt, wo ich dich mit "tausend verschiedenen Möglichkeiten, Whitespace zu entfernen, bis zum 30sten", zu Tode gelangweilt habe, hast du hoffentlich alles über die font-size: 0 vergessen font-size: 0 .

Alternativ können Sie nun flexbox verwenden , um viele der Layouts zu erreichen, die Sie zuvor inline-block verwendet haben: https://css-tricks.com/snippets/css/a-guide-to-flexbox/


Ok, obwohl ich sowohl die font-size: 0; und die not implemented CSS3 feature Antworten, nach dem Versuch habe ich herausgefunden, dass keine von ihnen eine echte Lösung ist .

Tatsächlich gibt es nicht einmal einen Workaround ohne starke Nebenwirkungen.

Dann habe ich beschlossen, die Leerzeichen (diese Antwort bezieht sich auf dieses Argument) zwischen den inline-block Divs aus meiner HTML Quelle ( JSP ) zu entfernen.

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

dazu

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

das ist hässlich, aber funktioniert.

Aber, warte Taglibs loops ... Was Taglibs loops wenn ich meine Divs in Taglibs loops ( Struts2 , JSTL , etc ...) Taglibs loops ?

Beispielsweise:

<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>

Es ist absolut nicht denkbar, all das Zeug in die Reihe zu bringen, das würde bedeuten

<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>

das ist nicht lesbar, schwer zu behalten und zu verstehen, etc ...

Die Lösung, die ich gefunden habe:

Verwenden Sie HTML-Kommentare, um das Ende eines Div mit dem Anfang des nächsten zu verbinden!

<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>

Auf diese Weise erhalten Sie einen lesbaren und korrekt eingerückten Code.

Und als positiven Nebeneffekt wird die HTML source , obwohl sie von leeren Kommentaren befallen ist, korrekt eingerückt;

Nehmen wir das erste Beispiel, imho dies:

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

ist besser als das

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

Ich hoffe, das hilft...


Leider ist es 2015 und der white-space-collapse ist noch nicht implementiert.

In der Zwischenzeit geben Sie das übergeordnete Element font-size: 0; und legen Sie die font-size für die Kinder fest. Dies sollte den Trick machen


Entfernen Sie die Leerzeichen von Inline-Blockelementen. Es gibt viele Methoden:

  1. Negative Marge

    div a {
        display: inline - block;
        margin - right: -4 px;
    }
    
  2. Schriftgröße auf Null

    nav {
        font - size: 0;
    }
    nav a {
        font - size: 16 px;
    }
    
  3. Überspringen Sie das schließende Tag

    < ul >
        < li > one
        < li > two
        < li > three
    < /ul>
    

p {
  display: flex;
}
span {
  float: left;
  display: inline-block;
  width: 100px;
  background: red;
  font-size: 30px;
  color: white;
}
<p>
  <span> hello </span>
  <span> world </span>
</p>


Es gibt eine einfache Lösung in CSS. Beispielsweise:

HTML

<p class="parent">
    <span class="children"> Foo </span>
    <span class="children"> Bar </span>
</p>

CSS

.parent {
    letter-spacing: -.31em;
    *letter-spacing: normal;
    *word-spacing: -.43em;
}
.children {
    display: inline-block;
    *display: inline;
    zoom: 1;
    letter-spacing: normal;
    word-spacing: normal;
}

Meiner Meinung nach ist das Schreiben von font-size: 0 nicht sicher, wenn Sie es in einem Projekt wie em verwenden , daher bevorzuge ich die Lösung von purecss.

Sie können dieses Framework in diesem Link purecss . Viel Spaß :)

.row {
    letter-spacing: -.31em;
    *letter-spacing: normal;
    *word-spacing: -.43em;

    /* For better view */
    background: #f9f9f9;
    padding: 1em .5em;
}

.col {
    display: inline-block;
    *display: inline;
    zoom: 1;
    letter-spacing: normal;
    word-spacing: normal;

    /* For better view */
    padding: 16px;
    background: #dbdbdb;
    border: 3px #bdbdbd solid;
    box-sizing: border-box;
    width: 25%;
}
<div class="row">

    <div class="col">1</div>
    <div class="col">2</div>
    <div class="col">3</div>
    <div class="col">4</div>

</div>


Ich habe das kürzlich angepackt und anstatt die übergeordnete font-size:0 dann das Kind auf einen vernünftigen Wert zurückzusetzen, habe ich konsistente Ergebnisse erhalten, indem ich den letter-spacing:-.25em des Eltern-Containers gesetzt habe letter-spacing:-.25em zurück zum letter-spacing:normal .

In einem anderen Thread sah ich einen Kommentator erwähnen, dass die font-size:0 nicht immer ideal ist, weil Leute minimale Schriftgrößen in ihren Browsern kontrollieren können, was die Möglichkeit, die Schriftgröße auf Null zu setzen, völlig zunichte macht.

Die Verwendung von ems scheint zu funktionieren, unabhängig davon, ob die angegebene Schriftgröße 100%, 15pt oder 36px beträgt.

http://cdpn.io/dKIjo


Nur zum Spaß: eine einfache JavaScript-Lösung.

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>


Ich habe die font-size: 0 Lösung für ein ähnliches Problem in React und Sass für ein Free Code Camp-Projekt ausprobiert, mit dem ich gerade arbeite.

Und es funktioniert!

Zuerst das Skript:

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

Dann der 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

Ich bin mir nicht sicher, ob du zwei blaue Felder ohne Lücke machen willst oder mit anderem Leerzeichen umgehen willst, aber wenn du die Lücke entfernen willst:

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

    float: left;
}

Und fertig.


Im Allgemeinen verwenden wir Elemente wie diese in verschiedenen Zeilen, aber im Fall von display:inline-block mit Tags in der gleichen Zeile wird den Raum entfernen, aber in einer anderen Zeile nicht.

Ein Beispiel mit Tags in einer anderen Zeile:

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

Beispiel mit Tags in derselben Zeile

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

Eine weitere effiziente Methode ist ein CSS-Job, der font-size:0 zum übergeordneten Element verwendet und einem untergeordneten Element so viele font-size zur Verfügung stellt, wie Sie möchten.

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

Die obigen Methoden funktionieren möglicherweise nicht in Abhängigkeit von der gesamten Anwendung, aber die letzte Methode ist eine narrensichere Lösung für diese Situation und kann überall verwendet werden.


Zwei weitere Optionen basieren auf dem CSS-Textmodul Level 3 (anstelle von white-space-collapsing:discard der aus dem Spezifikationsentwurf entfernt wurde):

  • word-spacing: -100%;

In der Theorie sollte es genau das tun, was benötigt wird - verkürzen Sie Leerzeichen zwischen "Wörtern" durch die 100% der Leerzeichenbreite, dh auf Null. Aber leider scheint es nirgends zu funktionieren, und dieses Feature ist als "gefährdet" markiert (es kann auch aus der Spezifikation gestrichen werden).

  • word-spacing: -1ch;

Es verkürzt die Zwischenworträume um die Breite der Ziffer "0". In einer Monospace-Schriftart sollte es genau gleich der Breite des Leerzeichen (und auch jedes anderen Zeichens) sein. Dies funktioniert in Firefox 10+, Chrome 27+ und funktioniert fast in Internet Explorer 9+.

Fiddle


Fügen white-space: nowrap dem Containerelement white-space: nowrap :

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>

Hier ist der Plunker .


Fügen Sie Kommentare zwischen Elementen hinzu, um KEINE Leerzeichen zu erhalten. Für mich ist es einfacher, die Schriftgröße auf null zurückzusetzen und sie dann zurückzusetzen.

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

Obwohl technisch keine Antwort auf die Frage: "Wie entferne ich den Abstand zwischen Inline-Block-Elementen?"

Sie können die Flexbox-Lösung ausprobieren und den folgenden Code anwenden. Der Speicherplatz wird dann entfernt.

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

Sie können mehr über diesen Link erfahren: https://css-tricks.com/snippets/css/a-guide-to-flexbox/


Ich hatte dieses Problem gerade und ab font-size:0; Ich habe festgestellt, dass in Internet Explorer 7 das Problem bleibt, weil Internet Explorer denkt "Schriftgröße 0?!?! WTF bist du verrückt Mann?" - Also, in meinem Fall habe ich Eric Meyers CSS-Reset und mit font-size:0.01em; Ich habe einen Unterschied von 1 Pixel von Internet Explorer 7 zu Firefox 9, also denke ich, dass dies eine Lösung sein kann.


Schriftgröße: 0; kann ein bisschen schwieriger zu verwalten sein ...

Ich denke, die folgenden paar Zeilen sind viel besser und wiederverwendbarer und sparen mehr Zeit als andere Methoden. Ich persönlich benutze das:

.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;}

Dann können Sie es wie folgt verwenden ...

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

Soweit ich weiß (vielleicht irre ich mich), aber alle Browser unterstützen diese Methode.

ERKLÄRUNG :

Das funktioniert (vielleicht sogar 3px besser) genau so, wie Sie es erwarten würden.

  • Sie kopieren und fügen Sie den Code (einmal)
  • Dann benutze auf deinem html einfach class="items" auf dem Elternteil jedes Inline-Blocks.

Sie werden NICHT die Notwendigkeit haben, zum css zurückzukehren und eine weitere CSS-Regel für Ihre neuen Inline-Blöcke hinzuzufügen.

Zwei Probleme gleichzeitig lösen.

Beachten Sie auch das > (Größer als Vorzeichen) Dies bedeutet, dass * / alle Kinder inline-block sein sollten.

http://jsfiddle.net/fD5u3/

Hinweis: ich habe geändert, um Platzhalterzeichen zu übernehmen, wenn ein Wrapper einen untergeordneten Wrapper hat.


Ich werde die Antwort von user5609829 ein wenig erweitern, da ich glaube, dass die anderen Lösungen hier zu kompliziert sind / zu viel Arbeit. Das Anwenden eines margin-right: -4px auf die Inline-Blockelemente wird den Abstand entfernen und wird von allen Browsern unterstützt. Siehe die aktualisierte Geige here . Für diejenigen, die negative Ränder verwenden, versuchen Sie this lesen.


Dies ist die gleiche Antwort, die ich auf die verwandten gegeben habe: Anzeige: Inline-Block - Was ist das für ein Raum?

Es gibt tatsächlich eine wirklich einfache Möglichkeit, Leerzeichen aus Inline-Blöcken zu entfernen, die sowohl einfach als auch semantisch sind. Es heißt eine benutzerdefinierte Schriftart mit Leerzeichen mit null Breite, die es ermöglicht, den Leerraum (der vom Browser für Inline-Elemente hinzugefügt wird, wenn sie sich in separaten Zeilen befinden) in der Zeichensatzebene mit einer sehr kleinen Schriftart zu reduzieren. Sobald Sie die Schriftart deklarieren, ändern Sie einfach die font-family auf dem Container und wieder auf den Kindern, und voila. So was:

@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;
}

Anzug nach Geschmack. Hier ist ein Download zu der Schriftart, die ich gerade in Font-Forge erfunden und mit FontSquirrel webfont generator konvertiert habe. Nahm mich alle 5 Minuten. Die css @font-face Deklaration ist enthalten: gezippte Null-Breite-Raumschrift . Es befindet sich in Google Drive, daher müssen Sie auf Datei> Herunterladen klicken, um es auf Ihrem Computer zu speichern. Wahrscheinlich müssen Sie die Schriftartenpfade auch ändern, wenn Sie die Deklaration in Ihre CSS-Hauptdatei kopieren.


Ich denke, dass es eine sehr einfache / alte Methode dafür gibt, die von allen Browsern sogar IE 6/7 unterstützt wird. Wir könnten einfach den letter-spacing auf einen großen negativen Wert im Elternteil setzen und ihn dann wieder auf normal Elemente setzen:

body { font-size: 24px }
span { border: 1px solid #b0b0c0; } /* show borders to see spacing */

.no-spacing { letter-spacing: -1em; } /* could be a large negative value */
.no-spacing > * { letter-spacing: normal; } /* => back to normal spacing */
<p style="color:red">Wrong (default spacing):</p>

<div class="">
  <span>Item-1</span>
  <span>Item-2</span>
  <span>Item-3</span>
</div>

<hr/>

<p style="color:green">Correct (no-spacing):</p>

<div class="no-spacing">
  <span>Item-1</span>
  <span>Item-2</span>
  <span>Item-3</span>
</div>


Mit PHP Klammern:

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







css