Este cartão tem largura de 250px, altura de 150px, borda sólida azul de 2px e padding de 15px em todos os lados.
Este é um cartão básico com espaçamento interno (padding) de 15px em todos os lados.
Este botão tem borda arredondada de 8px, padding vertical de 10px e horizontal de 20px, além de uma sombra sutil.
Este container tem largura de 80%, altura mínima de 300px, é centralizado horizontalmente com margin: 0 auto e tem borda tracejada.
Este é um container centralizado com borda tracejada e largura de 80% da tela.
Esta moldura tem bordas arredondadas com valores diferentes para cada canto e margens externas assimétricas.
Esta moldura tem cantos superiores e inferiores com raios diferentes, criando um formato irregular. As margens também são diferentes em cada lado.
Este bloco tem borda dupla de 5px e uma sombra forte que simula um efeito 3D.
Este bloco tem uma sombra que cria a ilusão de estar flutuando acima da página.
Neste exemplo, o parágrafo e a lista tiveram suas margens, paddings e bordas resetadas.
Este parágrafo teve suas margens e paddings resetados e sua largura definida para 400px.
Este elemento é um quadrado de 100x100px transformado em círculo usando border-radius: 50%, com margem uniforme de 20px.
Este elemento tem bordas diferentes em cada lado: esquerda sólida, inferior pontilhada, superior e direita sem borda.
Esta citação tem apenas duas bordas: uma sólida à esquerda e uma pontilhada na parte inferior. O padding à esquerda afasta o texto da borda.
Este card tem uma sombra interna que cria a sensação de profundidade ou depressão, com margem superior de 50px.
Este card tem uma sombra interna que parece "afundar" o conteúdo.
Este layout tem duas colunas lado a lado usando float, com larguras de 30% e 70%, respectivamente.
Esta é a coluna da esquerda com 30% de largura.
Esta é a coluna da direita com 70% de largura.