1

I have two div in my page. When I apply a border to these boxes, they get margin from top; but when no border is applied, the boxes are displayed with no margin. Why?

.header {
  width: auto;
  height: 100px;
  background-color: gray;
  text-align: center;
  line-height: 50px;
  border: 1px solid black;
}

.menu {
  background-color: green;
  height: 80px;
  border: 1px solid black;
}
<div class="header">
  <h1>title</h1>
</div>
<div class="menu"></div>
Roddy of the Frozen Peas
  • 14,380
  • 9
  • 49
  • 99
Hadi
  • 39
  • 1
  • 6
  • the margin is on the h1 and is still there, it just changes what the margin is spacing from. Not sure what effect you actually want but try adding to h1 { margin: 0; padding: 1rem; } – J Davies Jan 28 '22 at 18:44

1 Answers1

0

Add overflow:auto to your .header div.

jsFiddle example

And check out collapsing margins while you're at it.

Ashraf Ben Slimane
  • 3
  • 3