Perché tag di ancoraggio non prende altezza e la larghezza del suo elemento contenente

Question

Ecco il mio JsFiddle quando ho ispezionare la dimensione del tag di ancoraggio, che gli strumenti di sviluppo Chrome mi 144px*18px per il 1 ° elemento e 310px*18px mostra per il 2 ° elemento.

Voglio sapere perché non prende altezza e larghezza dell'elemento contenitore e come viene calcolato.

HTML

<div class="gallery"> 
<a href="#"> <img class="normal" src=""> </a> 
<a href="#"> <img class="wide" src=""> </a> 
</div> 

CSS

.gallery { 
background-color: #abcdef; 
} 
.gallery img { 
display: inline-block; 
margin-left: 20px; 
margin-top: 20px; 
} 
.normal { 
height: 160px; 
width: 110px; 
border: 5px solid black; 
} 
.wide { 
height: 160px; 
width: 280px; 
border: 5px solid black; 
} 

Answer 1

Il CSS 2.1 spec dice

Le dimensioni dell'area di contenuto di una scatola - la larghezza del contenuto e altezza del contenuto - dipende da diversi fattori: se l'elemento che genera la casella ha la proprietà 'width' o 'height' impostata, se la casella contiene testo o altre caselle, indipendentemente dal fatto che la casella sia una tabella, ecc. Le larghezze e le altezze del riquadro sono illustrate nel capitolo sui dettagli del modello di formattazione visual .

I <a> elemento predefinito è il valore visualizzato inline. I suoi contenuti partecipano al layout in modo che sia un elemento non-replaced.

Per l'altezza, le specifiche dice:

10.6.1 Inline, non-replaced elements

La proprietà 'height' non si applica. L'altezza dell'area di contenuto dovrebbe essere basata sul carattere, ma questa specifica non specifica come.

Quindi 18px è stato ricavato da una singola riga di testo, ricavata dalle metriche dei caratteri. Né il contenuto dell'immagine più grande, né la dimensione del blocco contenitore svolgono alcuna parte.

Per la larghezza, le specifiche dice

10.3.1 Inline, non-replaced elements

La proprietà 'width' non si applica. Un valore calcolato di 'auto' per 'margin-left' o 'margin-right' diventa un valore usato di '0'.

in altre parole, la larghezza è determinata dal contenuto dell'elemento <a>, dai bordi, dai bordi e dai margini.

Per la prima <a> elemento che è 114px (contenuto - immagine più uno spazio) + 20px (margine sinistro) + 2x5px (bordo sinistro e destro) = 144px

Per la seconda <a> elemento che è 280px (contenuti - immagine) + 20px (margine sinistro) + 2x5px (bordo sinistro e destro) = 310px

Basta tenere conto degli spazi. Gli elementi vengono disposti in una casella di riga in un contesto inline, pertanto gli spazi all'inizio del primo elemento <a> e alla fine del secondo elemento <a> vengono eliminati. Gli spazi alla fine del primo elemento <a> e l'inizio del secondo elemento <a> vengono compressi in uno spazio. Quando gli spazi sono compressi, è sempre il primo spazio che rimane, che in questo caso è quello alla fine del primo elemento <a>, ecco perché uno spazio partecipa alla larghezza del primo elemento <a> ma non nella larghezza del secondo uno.

Answer 2

uso display:inline-block in ancoraggio

.gallery a{ 
    display:inline-block; 
} 

qui viene aggiornato jsFiddle File

rimuovere anche mar il gin dall'immagine e aggiungerlo al ancorare

.gallery a{ 
    display: inline-block; 
    margin-left: 20px; 
    margin-top: 20px; 
} 

Answer 3

anchor è sempre display: inline per impostazione predefinita. Per fare in modo che lo anchor occupi il suo spazio figlio, devi dargli un display:block, o in questo caso, display:inline-block in modo che siano inline e block.

a{ 
    display:inline-block; 
} 

JSFiddle

Read this question for more info.

Answer 4

La necessità di un tag per avere uno stile così

ho aggiunto

.gallery a { 
display: inline-block; 
} 

Answer 5

Invece di applicare {display: inline-block} su un < > , provate ad applicare {float: left} al figlio di un < >. L'altezza dello < a > corrisponderebbe ora all'altezza del bambino.