У овом чланку ћемо разговарати о својству елемената инлине-блока. То је веома корисно својство ЦСС-а. Можемо га применити на разне ознаке. То је део својства приказа ЦСС-а.
лист јава
Употреба:
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 Излаз:
плутати на низ
Блоцк Елементс
Елементи који почињу на новом реду познати су као блок елементи. Блок елемент добија пуну ширину доступну за тај садржај. За разлику од инлине, постоје горња и доња маргина за ове елементе. Елементи на нивоу блока могу се појавити само унутар ознаке тела. Елементи на нивоу блока стварају већу структуру од инлине елемената.
Пример блок елемената:
,
инт у низу
Пример:
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> Излаз:
Инлине блок елементи
Приказана вредност инлине-блока функционише слично као инлине са једним изузетком: висина и ширина тог елемента постају променљиве.
Пример:
релационе алгебре у рдбмс
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>