Here is a style for a div element with a class of box:
.box {
width: 100px;
height: 100px;
background-color: gold;
padding: 20px;
border: 10px solid orange;
margin: 40px;
}
Based on this, the size of the box should be 160x160px with a 40px margin. This makes sense on Chrome’s DevTools.
However, when I use Firefox DevTools, I get numbers that are slightly off. These numbers change as I change the zoom level of the browser (which doesn’t happen with Chrome):
Why does Firefox work this way? Is there a way ensure that the box model is accurate to the CSS rule when using Firefox DevTools?
Thanks.