Um dos elementos essenciais para organização de páginas é o espaçamento.
Como vimos quando utilizamos apenas HTML, se não utilizarmos CSS todos os itens ficarão acoplados sem nenhum espaçamento.
Uma das formais mais utilizadas para espaçar itens se dá através da definição de uma margem. A margem é um espaçamento externo ao item.
Quando dizemos que nosso texto terá uma margem de 10 pixels para baixo quer dizer que o próximo item que for posto abaixo dele terá que estar a uma distância mínima de 10 pixels.
O border define uma borda ao redor de um item, está borda pode ter qualquer tamanho e qualquer coloração. Com ela definimos um espaçamento entre um item e tudo aqui que está dentro dele.
Quando queremos definir a distância entre um elemento e aquilo que está dentro dele utilizamos o padding.
Um padding esquerdo de 10 pixels significa que tudo que está dentro do meu elemento estará distante da borda por 10 pixels a esquerda.
div {
height: 100px; /* Altura em pixels */
width: 100px; /* Largura em pixels */
border-color: black; /* Cor da borda */
border-width: 5px 5px 5px 5px; /* Largura da borda para cada lado */
/* ˄ ˃ ˅ < */
border-style: solid; /* Borda lisa */
/*border: 5px solid black; <- Definição de forma resumida */
}
.min_box {
height: 50px;
width: 50px;
}
.box_1 {
padding: 10px; /* Padding de 10 pixels em cada lado */
background-color: blue; /* Cor de fundo do elemento */
}
.box_2 {
margin: 10px; /* Margin de 10 pixels em cada lado */
margin-top: 50px; /* Margin de 10 pixels para cima */
background-color: red;
}
...
<h1>CSS: Margin, Padding e Border</h1>
<div class="box_1">
<div class="min_box"></div>
</div>
<div class="box_2">
<div class="min_box"></div>
</div>
...
