vuota - tag html sottotitolo




Come rimuovo lo spazio tra gli elementi di blocco in linea? (20)

Aggiungi display: flex; all'elemento genitore. Ecco la soluzione con un prefisso:

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>

Aggiornare

Versione semplificata ๐Ÿ‘‡

p {
  display: flex;
}

span {
  width: 100px;
  background: tomato;
  font-size: 30px;
  color: white;
  text-align: center;
}
<p>
  <span> Foo </span>
  <span> Bar </span>
</p>

Dato questo HTML e CSS:

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

Di conseguenza, ci sarà uno spazio di 4 pixel tra gli elementi SPAN.

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

Capisco perché questo accade, e so anche che potrei liberarmi di quello spazio rimuovendo lo spazio bianco tra gli elementi SPAN nel codice sorgente HTML, in questo modo:

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

Tuttavia, speravo in una soluzione CSS che non richiedesse la manomissione del codice sorgente HTML.

So come risolvere questo problema con JavaScript, rimuovendo i nodi di testo dall'elemento contenitore (il paragrafo), in questo modo:

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

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

Ma questo problema può essere risolto solo con i CSS?


Aggiungi letter-spacing:-4px; su padre p css e aggiungi letter-spacing:0px; al tuo css span .

span {
  display:inline-block;
  width:100px;
  background-color:palevioletred;
  vertical-align:bottom;
  letter-spacing:0px;
}

p {
  letter-spacing:-4px;
}
<p>
    <span> Foo </span>
    <span> Bar </span>
</p>


Aggiungi commenti tra gli elementi per NON avere uno spazio bianco. Per me è più facile che resettare la dimensione del carattere a zero e poi ripristinarla.

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

Altre due opzioni basate sul livello 3 del modulo di testo CSS (anziché il white-space-collapsing:discard che era stato eliminato dalla bozza delle specifiche):

  • word-spacing: -100%;

In teoria, dovrebbe fare esattamente ciò che è necessario: accorciare gli spazi bianchi tra "parole" per il 100% della larghezza del carattere dello spazio, cioè a zero. Ma sembra che non funzioni dovunque, sfortunatamente, e questa funzionalità è contrassegnata come "a rischio" (può essere eliminata anche dalle specifiche).

  • word-spacing: -1ch;

Accorcia gli spazi tra parole per la larghezza della cifra '0'. In un font monospace dovrebbe essere esattamente uguale alla larghezza del carattere dello spazio (e di qualsiasi altro carattere). Funziona su Firefox 10+, Chrome 27+ e funziona quasi su Internet Explorer 9+.

Fiddle


Con parentesi PHP:

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


Dal momento che questa risposta è diventata piuttosto popolare, la sto riscrivendo in modo significativo.

Non dimentichiamo la vera domanda che è stata posta:

Come rimuovere lo spazio tra gli elementi di blocco in linea ? Speravo in una soluzione CSS che non richiedesse la manomissione del codice sorgente HTML. Questo problema può essere risolto solo con i CSS?

È possibile risolvere questo problema solo con i CSS, ma non ci sono correzioni CSS completamente robuste.

La soluzione che avevo nella mia risposta iniziale era di aggiungere font-size: 0 all'elemento genitore, e quindi dichiarare una font-size ragionevole sui bambini.

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

Funziona nelle versioni recenti di tutti i browser moderni. Funziona in IE8. Non funziona in Safari 5, ma funziona in Safari 6. Safari 5 è quasi un browser morto ( 0,33%, agosto 2015 ).

La maggior parte dei possibili problemi con le dimensioni dei caratteri relativi non è complicata da risolvere.

Tuttavia, anche se questa è una soluzione ragionevole se hai specificamente bisogno di una correzione solo CSS, non è quello che consiglio se sei libero di cambiare il tuo HTML (come molti di noi lo sono).

Questo è ciò che io, in quanto sviluppatore web ragionevolmente esperto, in realtà faccio per risolvere questo problema:

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

Sì, è giusto. Rimuovo lo spazio bianco nell'HTML tra gli elementi di blocco in linea.

È facile. È semplice. Funziona ovunque. È la soluzione pragmatica.

A volte devi considerare attentamente da dove arriveranno gli spazi bianchi. Aggiungendo un altro elemento con JavaScript aggiungi spazi bianchi? No, non se lo fai correttamente.

Andiamo in un viaggio magico di diversi modi per rimuovere lo spazio bianco, con qualche nuovo HTML:

<ul>
    <li>Item 1</li>
    <li>Item 2</li>
    <li>Item 3</li>
</ul>
  • Puoi farlo, come faccio di solito:

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

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

  • O questo:

    <ul>
        <li>Item 1</li
        ><li>Item 2</li
        ><li>Item 3</li>
    </ul>
    
  • Oppure, usa i commenti:

    <ul>
        <li>Item 1</li><!--
        --><li>Item 2</li><!--
        --><li>Item 3</li>
    </ul>
    
  • Oppure puoi persino saltare certain tag di chiusura (tutti i browser vanno bene con questo):

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

Ora che ti ho ucciso e ti ho annoiato a morte con "mille modi diversi per rimuovere spazi bianchi, a trentotto", spero che tu abbia dimenticato tutto sulla font-size: 0 .

In alternativa, ora puoi usare flexbox per ottenere molti dei layout che potresti aver utilizzato inline-block per: https://css-tricks.com/snippets/css/a-guide-to-flexbox/


Ho avuto questo problema in questo momento e dalla font-size:0; Ho trovato che in Internet Explorer 7 il problema rimane perché Internet Explorer pensa che "Font Size 0?!?! WTF sei pazzo?" - Quindi, nel mio caso ho il reset CSS di Eric Meyer e con font-size:0.01em; Ho una differenza di 1 pixel da Internet Explorer 7 a Firefox 9, quindi, penso che questa possa essere una soluzione.


Ho intenzione di espandere un po 'la risposta dell'utente5609829 poiché credo che le altre soluzioni qui siano troppo complicate / troppo lavoro. Applicando un margin-right: -4px agli elementi di blocco in linea rimuoverà la spaziatura ed è supportato da tutti i browser. Guarda il violino aggiornato here . Per quelli che si occupano di usare margini negativi, prova a dare una lettura.


La specifica Livello 4 del modulo di testo CSS definisce una proprietà di text-space-collapse , che consente di controllare il modo in cui viene elaborato lo spazio bianco all'interno e attorno a un elemento.

Quindi, per quanto riguarda il tuo esempio, dovresti solo scrivere questo:

p {
  text-space-collapse: discard;
}

Sfortunatamente, nessun browser sta ancora implementando questa proprietà (a settembre 2016) come menzionato nei commenti alla risposta di HBP .



Ogni domanda, che tenta di rimuovere lo spazio tra inline-block , mi sembra un <table> per me ...

Prova qualcosa del genere:

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>


Ok, anche se ho svuotato sia la font-size: 0; del font-size: 0; e le risposte alle not implemented CSS3 feature , dopo aver provato ho scoperto che nessuna di esse è una soluzione reale .

In realtà, non c'è nemmeno una soluzione alternativa senza forti effetti collaterali.

Poi ho deciso di rimuovere gli spazi (questa risposta riguarda questo argomento) tra i div inline-block della mia sorgente HTML ( JSP ), trasformando questo:

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

a questo

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

è brutto, ma funziona.

Ma aspetta un attimo ... cosa succede se sto generando i miei div in Taglibs loops Struts2 ( Struts2 , JSTL , etc ...)?

Per esempio:

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

Non è assolutamente pensabile integrare tutte queste cose, vorrebbe 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>

non è leggibile, difficile da mantenere e comprendere, ecc ...

La soluzione che ho trovato:

usa i commenti HTML per collegare la fine di un div all'inizio del prossimo!

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

In questo modo avrai un codice leggibile e correttamente indentato.

E, come effetto collaterale positivo, l' HTML source , sebbene infestata da commenti vuoti, risulterà correttamente rientrata;

facciamo il primo esempio, imho questo:

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

è meglio di questo

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

Spero che sia d'aiuto...



Questa è la stessa risposta che ho dato sulla relazione: Display: blocco Inline - Che cos'è questo spazio?

C'è in realtà un modo molto semplice per rimuovere gli spazi bianchi dal blocco in linea che è sia facile che semantico. Si chiama carattere personalizzato con spazi a larghezza zero, che consente di comprimere gli spazi bianchi (aggiunti dal browser per elementi in linea quando sono su righe separate) a livello di font utilizzando un font molto piccolo. Una volta che hai dichiarato il carattere, devi semplicemente cambiare la font-family sul contenitore e tornare indietro sui bambini, e voilà. Come questo:

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

Vestito per gusto. Ecco un download per il font che ho appena creato in font-forge e convertito con il generatore di webfont FontSquirrel. Mi ha preso tutti i 5 minuti. La dichiarazione css @font-face è inclusa: carattere spazio vuoto con larghezza zero . È su Google Drive, quindi dovrai fare clic su File> Scarica per salvarlo sul tuo computer. Probabilmente dovrai modificare anche i percorsi dei font se copi la dichiarazione nel tuo file css principale.


Sebbene tecnicamente non sia una risposta alla domanda: "Come rimuovo lo spazio tra gli elementi di blocco in linea?"

Puoi provare la soluzione Flexbox e applicare il codice qui sotto e lo spazio verrà rimosso.

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

Puoi saperne di più su questo link: https://css-tricks.com/snippets/css/a-guide-to-flexbox/


Semplice:

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

Non è necessario toccare l'elemento genitore.

Solo condizione qui: la dimensione del carattere dell'oggetto non deve essere definita (deve essere uguale alla dimensione del carattere del genitore).

0.25em è la word-spacing predefinita

W3Schools - proprietà word-spacing


Solo per divertimento: una semplice soluzione JavaScript.

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>



Usa flexbox e fai un fallback (dai suggerimenti sopra) per i browser più vecchi:

ul {
    display: -webkit-box;
    display: -moz-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
}

font-size: 0; può essere un po 'più complicato da gestire ...

Penso che le seguenti linee di coppia siano molto migliori e più riutilizzabili e che fanno risparmiare tempo rispetto a qualsiasi altro metodo. Io personalmente uso questo:

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

Quindi puoi usarlo come segue ...

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

Per quanto ne so come so (potrei sbagliarmi) ma tutti i browser supportano questo metodo.

SPIEGAZIONE :

Funziona (forse -3px può essere migliore) esattamente come si prevede che funzioni.

  • copia e incolla il codice (una volta)
  • quindi sul tuo html usa solo class="items" sul genitore di ciascun blocco inline.

NON avrai la necessità di tornare al css e aggiungere un'altra regola css, per i tuoi nuovi blocchi in linea.

Risolvere due problemi contemporaneamente.

Nota anche che > (maggiore di segno) questo significa che * / tutti i bambini dovrebbero essere inline-block.

http://jsfiddle.net/fD5u3/

NOTA: ho modificato per adattarmi ad ereditare la spaziatura delle lettere quando un wrapper ha un wrapper secondario.





css