Lucrul cu proprietatea display în CSS
Știți deja că toate tag-urile aparțin unui anumit
model de bloc. Cu toate acestea, dacă se dorește, se poate
schimba modelul folosind proprietatea display.
Folosind valoarea block a acestei proprietăți
un element poate fi făcut bloc, iar folosind
valoarea inline - inline.
Hai să facem ca tag-urile span
să se comporte ca elemente bloc:
<span>text</span>
<span>text</span>
<span>text</span>
span {
display: block;
width: 100px;
height: 100px;
border: 1px solid red;
margin-bottom: 20px;
}
:
Și acum să facem ca tag-urile div
să se comporte ca elemente inline:
<div>text</div>
<div>text</div>
<div>text</div>
div {
display: inline;
width: 100px;
height: 100px;
border: 1px solid red;
}
:
Să presupunem că în codul HTML aveți mai multe paragrafe. Faceți astfel încât acestea să se comporte ca elemente inline.
Să presupunem că în codul HTML aveți mai multe link-uri. Faceți astfel încât acestea să se comporte ca elemente bloc. Stabiliți-le o bordură, lățime și înălțime.