Fundamentos do CSS

O modelo de caixas

O chamado CSS box model, ou modelo de caixas é lógica pela qual os elementos de estilo são organizados. Na prática, diz respeito a modelo que estabelecem as margens (margin), a borda(border) e o espaçamento (padding) de cada elemento. Pode ser percebido a partir do moelo abaixo:

Neste modelo identificamos que:

• margin define as margens externas do elemento
• border define a borda do elemento
• padding define as margens internas do elemento
• content é o conteúdo (texto/imagem) propriamente dito

Como empregar o modelo de caixas

Para usar o modelo de caixas, é preciso estar ciente de que diversos elementos do HTML possuem estas propriedades, tais como:

• Títulos: <h1>, <h2>, <h3>, <h4>,<h5>
• Parágrafos e listas: <p>, <ul>, <ol>, <li>
• Imagens: <img>
• Tabelas, células: <table>, <td>
• Links: <a>
• Formulários, botões: <input>, <button>

Para definir as propriedades pode-se especificar múltiplos elementos como por exemplo

div {
    background-color: #FFFF00;
    margin-top: 20px;
    margin-right: 30px;
    margin-bottom: 20px;
    margin-left: 40px;
    border-width: 1px;
    border-style: solid;
    border-color: #FF0000; 
    padding-top: 10px;
    padding-right: 15px;
    padding-bottom: 10px;
    padding-left: 20px;
    }

O efeito do código acima pode ser visto no elemento abaixo

Entretanto, o mesmo código pode ser escrito de maneira resumida:

div {
    background-color: #FFFF00;
    margin: 20px 30px 20px 40px; 
    border: 1px solid #FF0000;
    padding: 10px 15px 10px 20px;
    }

O resultado será semelhante:

Percebe-se que as propriedades margin, border e padding são propriedades resumidas, que abarcam múltiplas propriedades.

Veja também

Voltar ao topo