În acest articol, vom discuta despre proprietatea elementelor bloc inline. Este o proprietate foarte utilă a CSS. Îl putem aplica pe diverse etichete. Este o parte a proprietății de afișare CSS.
harald baldr
Utilizare:
display: inline-block
Prin aplicarea proprietății de mai sus, elementul se va comporta ca inline și bloc pentru elementele sale fii. Să înțelegem elementele inline și bloc.
Elemente în linie
Elementele care nu încep pe o linie nouă sunt cunoscute ca elemente inline. Ele sunt combinate ca parte a textului principal și nu ca o acțiune separată. Aceste elemente ocupă doar spațiul necesar. Spațiile la stânga și la dreapta pot fi adăugate unui element în linie, dar nu poate fi adăugată înălțime la umplutura de sus sau de jos sau marginea unui element în linie.
Exemplu de elemente inline:
Exemplu:
Page Title .highlight{ background-color:#efefef} It is a demo span <span>inline element</span>; whose span is an highlighted with a grey color indicating that it is an inline tag Ieșire:
ordine aleatoare sql
Elemente de bloc
Elementele care încep pe o linie nouă sunt cunoscute ca elemente bloc. Un element bloc capătă toată lățimea disponibilă pentru acel conținut. Spre deosebire de inline, există o marjă de sus și de jos pentru aceste elemente. Elementele la nivel de bloc pot apărea numai în interiorul etichetei body. Elementele la nivel de bloc creează o structură mai mare decât elementele inline.
Exemplu de elemente bloc:
,
structuri de date în java
Exemplu:
Page Title p { background-color: #8A55; } <p>This paragraph is a block-level element; its background has been colored to display the paragraph's parent element.</p> Ieșire:
matrice js
Elemente de bloc inline
Valoarea de afișare a inline-block funcționează similar cu inline, cu o excepție: înălțimea și lățimea acelui element devin modificabile.
Exemplu:
span.b { display: inline-block; width: 100px; height: 100px; padding: 5px; color:white; border: 1px solid blue; background-color: blue; } This is an example of inline-block element with a span colored as blue <span>Inline-Block</span> Ieșire:
Mai jos este fișierul de ieșire folosind toate elementele dintr-o singură pagină:
Cod
span.a { display: inline; /* the default for span */ width: 100px; height: 100px; padding: 5px; border: 1px solid white; background-color: blue; } span.b { display: inline-block; width: 100px; height: 100px; padding: 5px; border: 1px solid white; background-color: green; } span.c { display: block; width: 70px; height: 50px; padding: 5px; border: 1px solid blue; background-color: pink; } <h2>display: inline</h2> This is section with a inline span made blue <span>inline</span> <span>element</span> <h2>display: block</h2> This is section with a block span made pink <span>block</span> <span>element</span> . <h2>display: inline-block</h2> This is section with a inline block span made green<span>inline</span> <span>block</span>