Why isn't the margin I set being applied to my elements?

Here’s my code solution. All the comments helped but the last thing I finally realized I was missing, was the bottom margin under the purple box…

#teal {
background-color: #A8D0DB;
padding: 0 50px;
margin: 100px;
}

#purple {
background-color: #414073;
padding: 50px 50px;
margin: 100px 100px 50px;
}

My solution. Works fine.

.block {
  height: 100px;
  width: 100px;
  display: block;
}

#container{
  background-color: #F4E8C1;
 	position: absolute;
  width: 100%;
}

#teal {
  background-color: #A8D0DB;
  margin: 100px;
  padding-left: 100px;
}

#purple {
  background-color: #414073;
  margin-bottom: 50px;
  margin-left: 100px;
  margin-top: 100px;
  padding: 50px;
}

Actually, I was confused by the fact that I need to change the size of the shapes using padding. Intuitively, I began to use height and width.