W tym artykule omówimy właściwości elementów bloków liniowych. Jest to bardzo przydatna właściwość CSS. Możemy zastosować go do różnych tagów. Jest częścią właściwości display CSS.
pętla foreach maszynopisu
Stosowanie:
display: inline-block
Stosując powyższą właściwość, element będzie zachowywał się jak wbudowany i blokowy dla swoich elementów podrzędnych. Przyjrzyjmy się elementom inline i block.
Elementy wbudowane
Elementy, które nie zaczynają się od nowej linii, nazywane są elementami wbudowanymi. Są one łączone jako część tekstu głównego, a nie jako osobna akcja. Elementy te zajmują tylko wymaganą przestrzeń. Do elementu śródliniowego można dodać spacje po lewej i prawej stronie, ale nie można dodać wysokości do górnego lub dolnego wypełnienia lub marginesu elementu śródliniowego.
Przykład elementów Inline:
Przykład:
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 Wyjście:
fasola Java
Elementy blokowe
Elementy rozpoczynające się od nowej linii nazywane są elementami blokowymi. Element blokowy zajmuje całą szerokość dostępną dla tej treści. W przeciwieństwie do inline, dla tych elementów istnieje górny i dolny margines. Elementy na poziomie bloku mogą pojawiać się tylko wewnątrz znacznika treści. Elementy na poziomie bloków tworzą większą strukturę niż elementy wbudowane.
Przykład elementów blokowych:
,
typy sieci
Przykład:
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> Wyjście:
Wbudowane elementy blokowe
Wartość wyświetlana bloku inline działa podobnie jak wartość inline z jednym wyjątkiem: wysokość i szerokość tego elementu można modyfikować.
Przykład:
pobierz filmy z YouTube'a na VLC
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> Wyjście:
Poniżej znajduje się plik wyjściowy wykorzystujący wszystkie elementy na jednej stronie:
Kod
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>