Why does margin-top not work to get the yellow box down? [duplicate]

Answer 1

This happens due to margin collapsing - so a border, padding to the parent element or inline content (any inline element) will switch off margin collapsing.

See demo below:

.largebox {
  width: 800px;
  height: 350px;
  background-color: #00f;
  margin-left: 10px;
  border: 1px solid; /*ADDED THIS*/

}
.box1 {
  width: 250px;
  height: 300px;
  background-color: #ff0;
  margin-left: 50px;
  margin-top: 25px;
}