Le interruzioni di linea tra i div rendono uno spazio. Come eliminarlo dall'HTML?

Question

Ho il seguente layout di

<div style="width:100px"> 
    <div style="width:50%; display: inline-block;"> 
     div1 
    </div> 
    <div style="width:50%; display: inline-block;"> 
     div2 
    </div> 
</div> 

perché in html c'è un cambiamento-line tra la chiusura e il div apertura (div1 e div2), i browser aggiungere un carattere "spazio" al posto della linea-break che si traduce in avere il secondo div da visualizzare al di sotto del primo div.

Tuttavia, se si rimuove il \ n tra div1 e div2, questi vengono visualizzati l'uno accanto all'altro, ovvero il comportamento previsto.

<div style="width:100px"> 
    <div style="width:50%; display: inline-block;"> 
     div1 
    </div><div style="width:50%; display: inline-block;"> 
     div2 
    </div> 
</div> 

Tuttavia, questo rende il codice brutto. Attualmente sto usando <DOCTYPE html>. Ho anche provato a passare a XHTML ma non ha funzionato. Sono abbastanza sicuro che ci sia un modo per eliminare questo comportamento di interruzioni di linea, qualche idea?

FYI: Non voglio utilizzare float o analizzare il mio output html in php durante il rendering per rimuovere le interruzioni di riga.

Answer 1

Credo che l'unica soluzione è effettivamente un bene per passare div con la lista

<ul style="width:100px"> 
    <li style="width:50%; display: inline-block;"> 
     div1 
    </li> 
    <li style="width:50%; display: inline-block;"> 
     div2 
    </li> 
</ul> 

tipicamente 'resettare' le proprietà di elenco faranno sembrare un div. Il vantaggio è che i browser non generano spazio tra gli articoli <li>.

Answer 2

Eventuali duplicati sul Removing whitespace between HTML elements when using line breaks

È possibile utilizzare float:left di stile CSS o semplicemente commentare gli spazi tra i tag:

<div style="width:100px"> 
    <div style="width:50%; display: inline-block;"> 
     div1 
    </div><!-- 
    --><div style="width:50%; display: inline-block;"> 
     div2 
    </div> 
</div> 

Successivamente modificare: Penso che la soluzione CSS è quello di impostare font-size:0px; al container div so:

<div style="width:100px; font-size:0px;"> 
    <div style="width:50%; display: inline-block; font-size:11px;"> 
     div1 
    </div> 
    <div style="width:50%; display: inline-block; font-size:11px;"> 
     div2 
    </div> 
</div> 

dovrebbe risolvere il problema.

visto su CSS unwanted spacing between anchor-tag elements

Answer 3

Un modo per risolvere il problema è utilizzare "display: table-cell" invece di "display: inline-block".

Answer 4

Altre vie (che a volte faccio), è di rimuovere quello spazio controllando il margine:

#mybar span { display: inline-block; } 
#mybar span:not(:first-child) { 
    margin-left: -4px; /* Adjust accordingly */ 
} 

Answer 5

più Una possibilità è quella di impostare il font-size del genitore a zero e quindi impostare il carattere -misura di elementi figlio per qualsiasi cosa tu abbia bisogno Come:

#mybar { font-size: 0; } 
#mybar span { font-size: 14px; } 

Tuttavia, è necessario essere consapevoli che font-size = 0 viene visualizzato diverso a seconda del browser: http://webdesign.about.com/od/fonts/qt/tipfont0.htm

ho provato in Firefox e funziona come previsto. Se ricordo bene, è possibile impostare anche la dimensione minima del carattere a seconda dei browser, quindi potrebbe non essere coerente.