U ovom ćemo članku raspravljati o svojstvu inline-block elemenata. To je vrlo korisno svojstvo CSS-a. Možemo ga primijeniti na razne oznake. To je dio svojstva prikaza CSS-a.
obrasci java softvera
Upotreba:
display: inline-block
Primjenom gornjeg svojstva, element će se ponašati kao ugrađeni i blokirani za svoje podređene elemente. Razumimo inline i blok elemente.
Umetnuti elementi
Elementi koji ne počinju u novom retku poznati su kao inline elementi. Kombiniraju se kao dio glavnog teksta, a ne kao zasebna radnja. Ovi elementi zauzimaju samo potreban prostor. Razmaci s lijeve i desne strane mogu se dodati umetnutom elementu, ali ne može se dodati visina gornjeg ili donjeg ispuna ili margine umetnutog elementa.
Primjer inline elemenata:
Primjer:
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 Izlaz:
sadrži java metodu
Elementi bloka
Elementi koji počinju u novom retku poznati su kao blok elementi. Element bloka dobiva punu širinu dostupnu za taj sadržaj. Za razliku od inline, za te elemente postoji gornja i donja margina. Elementi na razini bloka mogu se pojaviti samo unutar oznake tijela. Elementi na razini bloka stvaraju veću strukturu od inline elemenata.
Primjer blok elemenata:
,
doba petea davidsona
Primjer:
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> Izlaz:
java prekidač int
Inline Block Elements
Vrijednost prikaza inline-block-a radi slično kao inline s jednom iznimkom: visina i širina tog elementa postaju promjenjive.
Primjer:
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> Izlaz:
Ispod je izlazna datoteka koja koristi sve elemente na jednoj stranici:
Kodirati
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>