У овом чланку ћемо разговарати о својству елемената инлине-блока. То је веома корисно својство ЦСС-а. Можемо га применити на разне ознаке. То је део својства приказа ЦСС-а.

Употреба:

 display: inline-block  

Применом горње особине, елемент ће се понашати као инлине и блок за своје подређене елементе. Хајде да разумемо инлине и блок елементе.

Инлине Елементс

Елементи који не почињу на новом реду познати су као инлине елементи. Комбинују се као део главног текста, а не као посебна радња. Ови елементи заузимају само потребан простор. Размаци са леве и десне стране могу да се додају уметнутим елементима, али не може да се дода висина на горњи или доњи паддинг или маргину инлине елемента.

Пример уграђених елемената:

, , , <strong> , <a href="/html-image"><img></a> , , <a href="/html-button-tag"></a> , , , , are some of the inline tags.</strong>

Пример:

 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&apos;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>