1

I encountered some surprising rendering rules while working with a web framework.

app-custom-element {
    margin-right: 1em;
}

button {
    display: block;
}
<div>
    <app-custom-element>
        <div>Hello</div>
    </app-custom-element>
    <button>Button</button>
</div>

As long as app-custom-element preserves its inline nature the empty space between it and the button crops up (or inside it). What is the space and how its height calculated?

But there is another thing. If we remove the margin-right, the space would dissapear, even though the app-custom-element is still an inline element. So what's the way margins affect such behavior?

Ilya Loskutov
  • 1,967
  • 2
  • 20
  • 34
  • add a small padding and border to your inline element to see what is happening and check the duplicate for the full explanation – Temani Afif Apr 18 '22 at 11:12

0 Answers0