Guia de aprendizado
Design responsívo: margens
Margens são elementos que incluem espaçamento externo entre um bloco de conteúdo e o elemento mais externo que o contém, seja o corpo de um documento web ou mesmo algum outro bloco de conteúdo. O framework Sketch fornece classes para formatar a margem dos elementos HTML. Podem-se formatar as margens de ambos os cantos externos de um elemento HTML: canto superior, canto inferior, canto esquerdo, canto direito. A tabela abaixo apresenta as classes responsáveis por aplicar margem aos elementos HTML:
| Classe | Tamanho da margem para todos os cantos |
|---|---|
| no-margin | 0px |
| small-margin-frame | 2px |
| medium-margin-frame | 5px |
| large-margin-frame | 10px |
| jumbo-margin-frame | 15px |
Para adicionar margem somente a um dos cantos externos de um elemento HTML basta alterar o sufixo -frame por: -top (margem superior), -bottom (margem inferior), -left (margem à esquerda), -right (margem à direita). Vejamos alguns exemplos de uso.
Exemplo 1: bloco de conteúdo com margem de tamanho grande em todos os seus cantos externos.
<div class="container normal-height jumbo-margin-frame bg-color-steel-blue"></div>Esse código irá resultar no seguinte conteúdo:
Exemplo 2: bloco de conteúdo com margem direita e superior de tamanho grande.
<div class="container normal-height no-margin jumbo-margin-right jumbo-margin-top bg-color-maroon"></div>Esse código irá resultar no seguinte conteúdo:
Atenção:
Todas as classes que formatam margem têm suas propriedades alteradas quando as páginas HTML são exibidas em dispositivos móveis com até 480px de largura. Assim, todas as classes são formatadas para terem margem 2px para todos os cantos, exceto para o canto inferior, o qual é aplicada uma margem de 15px.