У цій статті ми обговоримо властивості inline-block elements. Це дуже корисна властивість CSS. Ми можемо застосовувати його до різних тегів. Це частина властивості відображення CSS.
машинописний цикл foreach
Використання:
display: inline-block
Застосувавши наведену вище властивість, елемент поводитиметься як вбудований і блокований для своїх дочірніх елементів. Давайте розберемося з вбудованими та блоковими елементами.
Вбудовані елементи
Елементи, які не починаються з нового рядка, називаються вбудованими елементами. Вони об’єднані як частина основного тексту, а не окрема дія. Ці елементи займають лише необхідний простір. Пробіли ліворуч і праворуч можна додати до вбудованого елемента, але не можна додати висоту до верхнього чи нижнього відступу чи поля вбудованого елемента.
Приклад вбудованих елементів:
приклад:
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 Вихід:
різниця між двома рядками python
Блокові елементи
Елементи, які починаються з нового рядка, називають блоковими елементами. Блоковий елемент отримує всю ширину, доступну для цього вмісту. На відміну від вбудованих, для цих елементів існує верхнє та нижнє поля. Елементи рівня блоку можуть з’являтися лише всередині тегу body. Елементи рівня блоку створюють більшу структуру, ніж вбудовані елементи.
Приклад елементів блоку:
,
структури даних в java
приклад:
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> Вихід:
Вбудовані блочні елементи
Відображуване значення inline-block працює подібно до inline, за одним винятком: висоту та ширину цього елемента можна змінювати.
приклад:
зробити сценарій sh виконуваним
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> Вихід:
Нижче наведено вихідний файл із використанням усіх елементів на одній сторінці:
Код
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>