-1

I was doing some experiments on margin-bottom, and found a small problem that I did not quite understand. 

.left {
  width: 60px;
  height: 100px;
  background-color: yellow;
}
<div class="left">Coding Coding Coding Coding Coding</div>

enter image description here

When I set it to margine-bottom: -50px, it looks like this. enter image description here

The box has the same width and height and can be rendered, but I don't understand what the orange part of the picture represents. Why is it reduced by half?

One explanation I see is that margin-bottom is negative and does not shift, reducing its own height for CSS to read. But I do not understand the meaning of this sentence, what is called its own height for CSS to read? If you can understand this point, can you explain it?

j08691
  • 204,283
  • 31
  • 260
  • 272
DangoSky
  • 185
  • 1
  • 2
  • 15

2 Answers2

1

When a static element is given a negative margin on the bottom, it doesn’t move the element down. Instead, it pulls any succeeding element into the main element, overlapping it.

enter image description here

Further reading on this post: https://stackoverflow.com/a/11499018/1945030

Khurram Ishaque
  • 778
  • 1
  • 9
  • 26
0

CSS margin creates distance between elements with positive values, and starts to overlap them with negative values. That orange looks like your inspector output showing you the inspected element's margin. Of course if you use positive margin-bottom the inspector will show orange below the element while negative margin-bottom is represented by the orange margin indicator showing the overlap that would result once this element is laying out with other elements in the DOM.

BugsArePeopleToo
  • 2,976
  • 1
  • 15
  • 16