Ho diversi DIV visualizzati come blocchi in linea; e sembrano ricevere spaziature automaticamente applicate tra di loro dal browser. Hanno margine/riempimento impostato su 0. C'è un modo per correggere questo senza usare margini negativi?Blocco in linea senza margini?
Sam, quello spazio che stai vedendo è in realtà spazio bianco. Ecco perché rimuovere i paddings e i margini non fa nulla. Lasciatemi spiegare. Quando hai questo:
HTML
<div>
a
a
a
a
</div>
questo è quel che ne risulta:
a a a a
... giusto?
Quindi, se avete questo:
<div>
<div style="display:inline-block"></div>
<div style="display:inline-block"></div>
<div style="display:inline-block"></div>
</div>
... si otterrà la stessa cosa:
block [space] block [space] block
Ora ... ci sono molte soluzioni differenti a questo problema. Credo che il più comune è commentando fuori gli spazi nel codice HTML:
<div>
<div style="display:inline-block"></div><!--
--><div style="display:inline-block"></div><!--
--><div style="display:inline-block"></div>
</div>
non mi piace, però - io preferisco mantenere il codice HTML più pulito possibile. Il mio modo preferito è impostare la dimensione del carattere del genitore su 0, e quindi impostare la dimensione del carattere desiderata sui blocchi in linea stessi.In questo modo:
div {
font-size: 0; /* removes the whitespace */
}
div div {
display: inline-block;
font-size: 14px;
}
Non è necessario utilizzare margini negativi per compensare i margini originali.
Invece è possibile sovrascrivere con il seguente:
* { margin:0; }
o:
.div { margin:0; }
se si tratta di elemento specifico.
EDIT:
Sembra che il problema potrebbe essere il risultato di spazi bianchi non intenzionale. Ad esempio:
<div style="display:inline-block">
...
</div>
<div style="display:inline-block">
...
</div>
Esiste uno spazio bianco tra i due divisori e il browser stamperà lo spazio bianco come risultato. Per risolvere questo problema, dovrai cambiarlo in:
<div style="display:inline-block">
...
</div><div style="display:inline-block">
...
</div>
Divertiti e buona fortuna!
cosa significa * fare? – Sam
* è un carattere jolly in CSS che rappresenta tutti gli elementi di un determinato documento. –
Questo non sembra risolvere il problema dei margini. Forse "margini" è il termine sbagliato. Ho diversi div uno vicino all'altro e il browser ha una spaziatura predefinita tra di loro; anche se sono impostati su magin 0 e padding 0. – Sam
inline-block è in origine un IE6 incidere
Questo è ciò che la sua utilizzati per:
Quindi, se vuoi avere più div accanto a vicenda utilizzate il galleggiante, la sua gonna risolvere molti dei i vostri problemi css che inline-block può causare, in particolare del browser croce emette
più su inline-block here arcticle 9.2.4
migliori saluti SP
Si prega di commento, se in disaccordo
inline-block non è un hack, è per consentire agli elementi di scorrere come se fossero parte del testo. Il tuo consiglio sull'uso di float è sbagliato. L'uso non necessario di float causa problemi di manutenibilità, probabilmente significherà che il tuo sito non risponde alle diverse dimensioni di schermo/finestra, ed è di progettazione scadente. – Jake
Inline-block ha alcuni problemi per cui è un po 'allentato, e sono d'accordo sul fatto che float non è la soluzione ideale ma non avete il blocco inline in IE6 quindi questo è il motivo per cui vorrei andare in float come fallback. –
Un altro modo che ho trovato il metodo di alterare il word-spacing sul contenitore padre per me funziona https://jsfiddle.net/1ex5gpo3/2/
.parent {
word-spacing: -1em;
}
.child {
word-spacing: normal;
display: inline-block;
}
è possibile utilizzare sia display: inline-block e float: left per rimuovere quello spazio.
Qui va plunkr: https://plnkr.co/edit/Sn3NG77asiXO8UrrpxWD?p=preview
+1: entrambe sono buone soluzioni. – Wex