Aprenda como envolver o texto em uma imagem flutuante com CSS.
Para fazer o texto envolver a imagem à direita, da mesma forma que está na foto de introdução a este artigo, use uma regra CSS como esta:
A regra float: left faz com que a imagem se mova para a margem esquerda. A regra de preenchimento à direita evita que o texto bata no lado direito da imagem. Se uma borda fosse adicionada a esta imagem, o preenchimento ficaria entre a imagem e a borda. Consulte a Seção 2 para trabalhar com uma imagem com borda.
Em seguida, adicione margens à esquerda e à direita da imagem para centralizá-la. O valor adequado para as margens esquerda e direita centralizar qualquer coisa é automático.
Para criar uma borda espessa em forma de moldura usando o estilo de borda com ranhura, uma regra como esta pode ser usada:
Outros estilos de borda são sólidas, pontilhadas, tracejadas, duplas, cristas, inseridas e iniciadas. A largura pode ser expressa em pixels, ems ou porcentagens.
As bordas podem ser aplicadas seletivamente na parte superior, direita, inferior e esquerda da imagem. Você pode usar esse conhecimento para criar um efeito como uma sombra projetada.
Usando uma borda sólida em 2 tons de cinza apenas na borda direita e inferior, você obtém um efeito de sombra projetada.
img {float: left; estilo da borda direita: sólido; border-right-width: 8px; border-right-color: #CCCCCC; estilo de borda inferior: sólido; border-bottom-width: 8px; cor da borda inferior: # 999999; margem direita: 1em; margem inferior: 1em; }
Gorjeta
Se você tiver imagens em mais de uma divisão (div) de uma página, use os seletores descendentes para estilizá-los individualmente. Seletores possíveis: #content img, #sidebar img, #feature img.
