Ho una ragionevole comprensione del css, del modello box e del posizionamento in generale.mistero dell'altezza degli ul in div posizionati: come funziona?
Ma c'è un mistero che non ho mai grokked, né ho potuto google la mia strada alla comprensione di esso sulle molte volte ha rallentato la mia realizzazione di un layout:
Il mistero della ul all'interno di una posizionata div
Perché devo impostare il ulfont-size-0, e line-height-1, e quindi reimpostare di nuovo a quello che io voglio che siano nello li per ottenere il ul ad essere l'altezza giusta e (sembra) essere contenuto nello div?
Da dove viene la misteriosa altezza extra se imposto lo ulline-height all'altezza della linea nominale che desidero? Perché questa altezza extra è diversa su ogni browser?
Ci sono molti altri modi per finire con misteriose altezze e compensazioni, ma sento che se avessi capito questi casi avrei un modello sufficiente.
Qualcuno possiede un modello mentale che mi consenta di prevedere questi comportamenti? (e quindi si spera che li ricordi, in modo da non perdere tempo a rielaborarlo ogni 6 mesi)?
Here is a playground demonstrating what I seek to understand.
section {
background-color: gray;
width: 500px;
height: 700px;
padding-top: 10px;
font-size: 12px;
line-height: 25px;
}
.reference {
background-color: aquamarine;
height: 25px;
width: 75px;
float: left;
padding: 0;
margin: 0;
}
.container {
padding: 0;
margin: 0;
background-color: white;
height: 25px;
width: 423px;
}
ul {
list-style-type: none;
background-color: rgba(255, 50, 50, 0.25);
}
li {
display: inline;
}
.case-one {
display: inline-block;
}
.reference-two {
position: absolute;
top: 130px;
}
.reference-two-b {
position: absolute;
top: 200px;
}
.case-two {
position: absolute;
left: 85px;
}
.case-two-a {
top: 130px;
}
.case-two-b {
top: 200px;
}
.case-two ul {
position: relative;
font-size: 0px;
}
.case-two-a ul {
line-height: 1;
}
.case-two-b ul {
line-height: 25px;
}
.case-two li {
display: inline;
font-size: 12px;
line-height: 25px;
}<section>
<div class="container case-one">this I fully understand</div>
<div class="reference">case one</div>
<br/>
<br/>
<div class="container case-one">
<div style="background-color: rgba(50,50,200,0.4); width:8px;height: 12px; position: absolute;"></div>
<ul>
<li>but</li>
<li>not this.</li>
<li>why is the ul offset?</li>
<li>why by font-size, not line-height?</li>
</ul>
</div>
<div class="reference">case one b</div>
<div class="container case-two case-two-a">
<ul>
<li>why does</li>
<li>setting the ul font-size to 0 work?</li>
</ul>
<div style="line-height: 1.2;">also, why does the ul line-height have to be set to 1? If it is set to 25px, the ul grows, see below</div>
</div>
<div class="reference reference-two">case two</div>
<div class="container case-two case-two-b">
<div style="background-color: rgba(50,50,200,0.4);left:4px;width:8px; height: 30px; position: absolute;"></div>
<div style="background-color: rgba(50,200,50,0.4);width:8px; height: 29px; position: absolute;left:16px;"></div>
<div style="background-color: rgba(200,50,50,0.4);width:8px; height: 28px; position: absolute;left:28px;"></div>
<ul>
<li>why does</li>
<li>setting the ul line-height to 25px result in it being 30px high?</li>
</ul>
<div style="line-height: 1.4;margin-top: 8px;">where does the 5px come from?? Why is it 4px on chrome? Why is it 3px on firefox? Anyone else get any other heights, lol?</div>
</div>
<div class="reference reference-two-b">case two</div>
</section>
Il ** strut ** è quello che mi mancava! Sai perché l'altezza aggiunta varia di un pixel o giù di lì tra i browser? Di solito inizio con un reset, ma penso che il problema nel particolare progetto che mi ha spinto a porre questa domanda fosse un esempio del caso 2 che per coincidenza mi è sembrato un esempio di caso 1 a causa dei numeri particolari che stavo usando anche se aveva margine 0. –
ora che ho un modello mentale, sarà facile ricordare perché e dove ho bisogno di usare '' 'font-size: 0; line-height: 1;' ' –
wow questa parte: * è considerato contenere un puntone (un glifo invisibile di larghezza zero) con A e D ** del primo font disponibile dell'elemento **. * spiega un sacco di casualità lacerante che ho vissuto in passato –