CSS - Bloco Embutido
Em
comparação com display:
inline, a principal diferença é que display: inline-block
permite definir uma largura e altura no elemento.
Além
disso, com display:
inline-block, as margens/preenchimentos superiores e inferiores
são respeitadas, mas com display: inline eles
não.
Em
comparação com display:
block, a principal diferença é que display: inline-block
não adiciona uma quebra de linha após o elemento, para que o
elemento possa ficar próximo a outros elementos.
<!DOCTYPE
html>
<html>
<head>
<style>
span.a
{
display: inline; /* the default for span */
width: 100px;
height: 100px;
padding: 5px;
border: 1px solid blue;
background-color: yellow;
}
span.b
{
display: inline-block;
width: 100px;
height: 100px;
padding: 5px;
border: 1px solid blue;
background-color: yellow;
}
span.c
{
display: block;
width: 100px;
height: 100px;
padding: 5px;
border: 1px solid blue;
background-color: yellow;
}
</style>
</head>
<body>
<h1>A
propriedade de exibição</h1>
<h2>exibição:
em linha</h2>
<div>Lorem
ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum consequat
scelerisque elit sit amet consequat. Aliquam erat volutpat. <span
class="a">Aliquam</span> <span
class="a">venenatis</span> gravida nisl sit amet facilisis.
Nullam cursus fermentum velit sed laoreet. </div>
<h2>exibição:
bloco em linha</h2>
<div>Lorem
ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum consequat
scelerisque elit sit amet consequat. Aliquam erat volutpat. <span
class="b">Aliquam</span> <span
class="b">venenatis</span> gravida nisl sit amet facilisis.
Nullam cursus fermentum velit sed laoreet. </div>
<h2>exibição:
bloco</h2>
<div>Lorem
ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum consequat
scelerisque elit sit amet consequat. Aliquam erat volutpat. <span
class="c">Aliquam</span> <span
class="c">venenatis</span> gravida nisl sit amet facilisis.
Nullam cursus fermentum velit sed laoreet. </div>
</body>
</html>
INLINE-BLOCK PARA CRIAR LINKS DE NAVEGAÇÃO
<!DOCTYPE html>
<html>
<head>
<style>
.nav {
background-color: yellow;
list-style-type: none;
text-align: center;
margin: 0;
padding: 0;
}
.nav li {
display: inline-block;
font-size: 20px;
padding: 20px;
}
</style>
</head>
<body>
<h1>Links de
Navegação Horizontals</h1>
<p>Por padrão,
os itens da lista são exibidos verticalmente. Neste exemplo, usamos display:
inline-block para exibi-los horizontalmente (lado a lado)..</p>
<p>Observação:
se você redimensionar a janela do navegador, os links serão quebrados
automaticamente quando ela ficar muito cheia. </p>
<ul
class="nav">
<li><a
href="#home">Home</a></li>
<li><a
href="#about">Sobre Nós</a></li>
<li><a
href="#clients">Nosos clientes</a></li>
<li><a
href="#contact">Contato</a></li>
</ul>
</body>
</html>