В тази статия ще обсъдим свойството на inline-block елементи. Това е много полезно свойство на CSS. Можем да го приложим към различни тагове. Това е част от свойството CSS display.
javascript base64 декодиране
Употреба:
display: inline-block
Чрез прилагане на горното свойство, елементът ще се държи като 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 Изход:
cm във футове и инчове
Блокови елементи
Елементите, които започват на нов ред, са известни като блокови елементи. Един блоков елемент придобива цялата налична ширина за това съдържание. За разлика от inline, има горно и долно поле за тези елементи. Елементите на ниво блок могат да се показват само в етикета body. Елементите на ниво блок създават по-голяма структура от вградените елементи.
Пример за блокови елементи:
,
възрастта на Пийт Дейвидсън
Пример:
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 с едно изключение: височината и ширината на този елемент стават модифицируеми.
Пример:
масив c низ
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>