Perché i browser moderni ancora inserire spazi tra blocco in linea, se non v'è spazio bianco

Se si dispone di markup come questo:Perché i browser moderni ancora inserire spazi tra blocco in linea, se non v'è spazio bianco

<div class="inlineblock">one</div> 
<div class="inlineblock">two</div> 
<div class="inlineblock">three</div>

e css in questo modo: .inlineblock {display: inline-block; }

Otterrete spazi tra gli elementi. circa 4px di spazio. a meno che il tuo markup non sia così:

<div class="inlineblock">one</div><div class="inlineblock">two</div><div class="inlineblock">three</div>

Ora, quello che vorrei sapere è PERCHÉ?

Qual è il motivo tecnico per cui i "buoni" browser continuano a farlo, anche gli ultimi Firefox, Chrome e Opera al momento di questa pubblicazione continuano a farlo. Presumo che ci sia un motivo tecnico dietro di esso, altrimenti sarebbe stato risolto ora?

Grazie!

fonte

2013-05-22 deweydb

Perché no? Gli elementi di blocco in linea sono programmati per apparire in linea con il testo. Se c'è del testo tra, dovrebbe essere visualizzato. – zneak

Non hai notato l'errore (in realtà non è un fallimento) nella vecchia esplorazione, perché la maggior parte di loro non poteva sopportare completamente il "blocco in linea". Questo non è un fallimento, ti consiglio di usare il reset CSS. Leggi la mia risposta: http://stackoverflow.com/questions/16698142/why-do-modern-browsers-still-put-spaces-between-inline-block-if-there-is-whitesp/16698173#16698173 –

@Guilherme Nascimento Non so perché stai facendo una discussione sui vecchi browser e sui loro difetti. Questo non ha nulla a che fare con la domanda. – deweydb

Questo è esattamente ciò che fanno do.

Gli spazi tra gli elementi in linea non si differenziano dagli spazi tra le parole.

Se non si desidera, utilizzare gli elementi di blocco o impostare la dimensione del carattere su zero.

fonte

2013-05-22 17:33:28 SLaks

Esattamente, proprio come quando fai ' a b' ti aspetti 'ab' e non' ab' e quando scrivi "Hello World" ti aspetti "Hello World" e non "HelloWorld" –

Grazie, non ho Penso che sia così, pensavo soprattutto a come odiavo l'aspetto del mio markup, ma immagino che l'hack delle dimensioni del font sarà sufficiente. Saluti. – deweydb

Bene, ci sono spazi tra loro!

Per una correzione, provare a utilizzare font-size: 0 nell'elemento padre.

fonte

2013-05-22 17:34:41 gustavohenke

C'è un modo migliore di rimuovere lo spazio bianco piuttosto che impostare la dimensione del carattere su zero (poiché questo metodo ha effetti collaterali spiacevoli). È possibile invece la spaziatura delle parole:

<!DOCTYPE html> 
<html lang="en"> 
<head> 
<meta charset="utf-8"> 
<style> 

section { 
    word-spacing:-.25em; /* hide whitespace nodes in all modern browsers (not for webkit)*/ 
    display:table;/* Webkit Fix */ 
} 

div { 
    width: 100px; 
    height: 40px; 
    background: #e7e7e7; 
    padding: 10px; 
    display:inline-block; 
    word-spacing:0; /* reset from parent*/ 
} 

</style> 
</head> 
<body> 
<section> 
    <div>one</div> 
    <div>two</div> 
    <div>three</div> 
</section>   
</body> 
</html>

fonte

2013-08-26 12:53:14

Questa è la soluzione.

<style> 
    * { 
    border:0; 
    margin:0; 
    padding:0; 
    box-shadow:0 0 1px 0px silver; 
    } 
    .foo { 
    width: 100%; 
    } 
    .bar { 
    width: 50%; 
    float:left; 
    text-align: center; 
    } 
    </style> 
    <div class="foo"> 
     <div class="bar"> 
      ...a new customer 
     <!-- the whitespace between the following divs affects rendering - why? --> 
     </div> <div class="bar"> 
      ...an existing customer 
     </div> 
    </div>

fonte

2013-08-26 13:51:45

Perché i browser moderni ancora inserire spazi tra blocco in linea, se non v'è spazio bianco

risposta

Problemi correlati