Práce s vlastností display v CSS
Už víte, že všechny tagy patří k určitému
blokovému modelu. Pokud si však přejete, můžete
model změnit pomocí vlastnosti display.
Pomocí hodnoty block této vlastnosti
lze prvek učinit blokovým a pomocí
hodnoty inline - řádkovým.
Udělejme, aby se tagy span
chovaly jako blokové elementy:
<span>text</span>
<span>text</span>
<span>text</span>
span {
display: block;
width: 100px;
height: 100px;
border: 1px solid red;
margin-bottom: 20px;
}
:
A nyní udělejme, aby se tagy div
chovaly jako řádkové:
<div>text</div>
<div>text</div>
<div>text</div>
div {
display: inline;
width: 100px;
height: 100px;
border: 1px solid red;
}
:
Nechť máte v HTML kódu několik odstavců. Zařiďte, aby se chovaly jako řádkové elementy.
Nechť máte v HTML kódu několik odkazů. Zařiďte, aby se chovaly jako blokové elementy. Nastavte jim okraj, šířku a výšku.
