Modelo de caixa

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

.caixa {
  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;
}

Temos também o border

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

Vamos praticar?

Display

.caixa_maior {
  display: block;
}

Display

.caixa_maior {
  display: inline;
}

display

.caixa_maior {
  display: none;
}

display

.ninja {
  display: none;
}

.em-linha {
  display: inline;
}

.bloco-em-linha {
  display: inline-block;
  height: 200px;
}

.bloco {
  display: block;
}

inline

inline

block

block

Vamos praticar?

Até a próxima!

Modelo de caixa

By Vai Na Web

Modelo de caixa

WIP

  • 899