Boa noite a todos, Gostaria de saber porque não consigo deixar a img e os parágrafos alinhados com a propriedade display: inline-block. Tanto a imagem quanto os parágrafos tem a propriedade block como padrão, sendo assim ao definirmos a propriedade display: inline-block para ambas deveria ser possível além de deixar lado a lado também definirmos margin e padding para dar o espaçamento correto, certo?
Solucionado (ver solução)
Solucionado
(ver solução)
1
resposta
resposta
Porque não é possível deixar a imagem e os parágrafos lado a lado com display: inline-block?
solução!
Oi Marília, acredito que não é a maneira mais adequada para se fazer, mas é possível sim, só que é necessário considerar o tamanho dos elementos e o espaço disponível, para que eles fiquem lado a lado.
<html>
<head>
<meta charset="UTF-8">
<style>
div{
width: 660px;
}
img, p{
display:inline-block;
width: 150px;
height: 150px;
margin: 5px;
padding: 5px;
box-sizing: border-box;
}
</style>
</head>
<body>
<div>
<img src="https://upload.wikimedia.org/wikipedia/commons/thumb/f/f0/Star_Ouro.gif/1200px-Star_Ouro.gif">
<p>Lorem ipsum tristique tortor curae mi etiam pretium platea, fermentum torquent sem sapien nam malesuada scelerisque etiam ultricies, aliquam nibh proin lectus sollicitudin id tempus. at eleifend.</p>
<img src="https://upload.wikimedia.org/wikipedia/commons/thumb/f/f0/Star_Ouro.gif/1200px-Star_Ouro.gif">
<p>Auctor fusce condimentum ultricies taciti dapibus maecenas tincidunt fusce, quam viverra habitasse viverra lacus lacinia laoreet, vitae maecenas rhoncus interdum lectus aptent sociosqu.</p>
</div>
</body>
</html>