Inline blokelementer
I denne artikel vil vi diskutere inline-blokelementers egenskab. Det er en meget nyttig egenskab ved CSS. Vi kan anvende det på forskellige tags. Det er en del af CSS-visningsegenskaben.
Anvendelse:
display: inline-block
Ved at anvende ovenstående egenskab vil elementet opføre sig som inline og blok for dets underordnede elementer. Lad os forstå inline- og blokelementerne.
Inline elementer
De elementer, der ikke begynder på en ny linje, er kendt som inline-elementer. De er kombineret som en del af hovedteksten og ikke en separat handling. Disse elementer optager kun den nødvendige plads. Mellemrum til venstre og højre kan tilføjes til et inline-element, men der kan ikke tilføjes højde til den øverste eller nederste polstring eller margen på et inline-element.
Eksempel på inline-elementer:
Eksempel:
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 Produktion:
Blokelementer
De elementer, der begynder på en ny linje, er kendt som blokelementer. Et blokelement opnår den fulde bredde, der er tilgængelig for det pågældende indhold. I modsætning til inline findes der en top- og bundmargen for disse elementer. Elementer på blokniveau må kun vises inde i body-tagget. Elementer på blokniveau skaber en større struktur end inline-elementer.
Eksempel på blokelementer:
,
Eksempel:
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> Produktion:
Inline blokelementer
Visningsværdien af inline-blok fungerer på samme måde som inline med én undtagelse: højden og bredden af dette element kan ændres.
Eksempel:
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> Produktion:
Nedenfor er outputfilen, der bruger alle elementerne på én side:
Kode
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> 
