body {
  font-family: sans-serif;
}

h1,
p,
div,
footer {
  border: 3px solid red;
}

p {
  width: 50%;
  padding: 25px;
}

div {
  margin: 50px;
}

b,
em,
a,
span {
  background: yellow;
}

/* Nas tags inline por padrão não se aplicam propriedades de bloco
 Apenas aplicamos propriedades de bloco se mudarmos sua propriedade para
 display: block */
em {
  height: 50px;
  width: 200px;
  margin: 50px;
  padding: 50px;
  /* O display: block tira o elemento do fluxo de texto. O display: inline:block
  aplica as propriedades de bloco do elemento mas sem tirá-lo do fluxo.
  Já o display:none tira o elemento do texto. */
  /* display: block; */
  display: inline-block;
  /* display: none; */
  /* O visibility: hidden somente oculta o elemento sem remover sua posição
  no fluxo do documento. */
  /* visibility: hidden; */
}

img,
span {
  display: block;
}

/*  {
  display: none;
} */