Caixas, caixas...

Imaginem que nossos elementos são caixinhas retangulares. Podemos determinar o tamanho, altura, preenchimento, espaçamento, e até cores dessas caixas.

Cada caixa tem uma largura e altura, definimos com as propriedades width e height

.elemento {
  width: 100px;
  height: 100px;
}

Além do width e height temos também o padding e margin.

.elemento {
  width: 100px;
  height: 100px;
  padding: 50px;
  margin: 50px;
}

Vamos praticar?

Temos também o border

.elemento {
  width: 100px;
  height: 100px;
  padding: 50px;
  margin: 50px;
  border-style: solid;
  border-width: 5px;
  border-color: #ffffff;
}

Exemplo:

padding

margin

width

height

border

Há caixas que se comportam em forma de bloco, e há caixas que se comportam como em forma de linha. Cada elemento já tem esse comportamento definido por padrão, mas podemos altera-lo também.

Display

Basta alterar os valores da propriedade display com inline, ou block.

p {
  display: block;
}

Alguns exemplos de elementos que se comportam em forma de linha

p {
  display: inline;
}

O valor que mais usamos, e um dos mais poderosos é o Flex, com ele usar as propriedades do Flexbox, vamos estudar mais sobre ele nas próximas aulas.

p {
  display: flex;
}

Os elementos param de fazer parte do layout, logo somem

p {
  display: none;
}

Vamos praticar?