Solucionado (ver solução)
Solucionado
(ver solução)
1
resposta

Porque não é possível deixar a imagem e os parágrafos lado a lado com display: inline-block?

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?

1 resposta
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>