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:

, , , <strong> , <a href="/html-image"><img></a> , , <a href="/html-button-tag"></a> , , , , are some of the inline tags.</strong>

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:

,

,

, , , , , neke su od ugrađenih oznaka.

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&apos;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>