/*All HTML elements can be considered as boxes. In CSS, the term "box model" is used when talking about design and layout.

The CSS box model is essentially a box that wraps around every HTML element. It consists of: margins, borders, padding, and the actual content. */

#top{
  border: 4px solid blue;
  width:50%;
  text-align: center;
  /*top,right,bottom,lef*/
  margin: auto;
}

#bottom{
  border: 4px solid red;
  width:50%;
  padding: 200px;
  text-align: center;
}