0

There is margin on the right on div element even though I set the margin: 0, It works as expected in Firefox. What is wrong with chrome?

Codepen Link

<section>
    <h2>CSS Positing Property</h2>
    <div className="css-box illustration">
        <div className="box">
        <div className="box2"><p>box 2</p></div>
        <div className="box1"><p>box 1</p></div>            
    </div>
</section>

css-box {
    margin: 0;
}

.css-box .box {
    width: 500px;
    height: 500px;
    border: 2px solid white;
    position: relative;
    margin: 0;
}
.box div {
    width: 160px;
    height: 160px;
    margin: 0;
    padding: 0;
}

.box2 {
    background-color: red;
}

.box1 {
    background-color: blue;
}

enter image description here There is no margin on div.box in Firefox

enter image description here There is margin on the right in div.box in Chrome

enter image description here The margin is set to zero but chrome has margin on the right where as Firefox doesn't

I set the margin to 0, which works in firefox but not on brave

space-goblin
  • 52
  • 9
  • Did you set `.css-box`'s padding 0? It may cause this problem.. – Phillip Aug 24 '22 at 07:38
  • Chromium is showing you the used margin. Firefox is not. The used margin is the same in both, it's just that only Chromium depicts it. – Alohci Aug 24 '22 at 07:53
  • @Phillip padding 0 didn't change anything, The problem is with the margin – space-goblin Aug 24 '22 at 08:01
  • @Alohci what do you mean by used margin? The div element has a fixed width and height with margin set to 0 which should show a box with no margins like it's showing in Firefox, but the div extends to the right on chromium which is not supposed to happen – space-goblin Aug 24 '22 at 08:02
  • @aalizwel23 [Used Values](https://www.w3.org/TR/css-cascade-5/#used-value) - the div width is over-constrained, so the used value is different from the specified and computed value. – Alohci Aug 24 '22 at 08:13
  • @Alohci The used value is the same in both cases which is margin: 0; Try running this codepen in both the browser and see the difference https://codepen.io/space-goblin/pen/QWmPOQp – space-goblin Aug 24 '22 at 08:25

0 Answers0