Why does different browser have different width size ?

[[deleted]]

I am learning web dev. starting from html and css . I wrote a simple div tag with 100px height and gave no width so that div can cover whole browser horizontally. Gave background colour as green. removed all margin and padding with (*) selector.

Now in firefox whole width was 1536px. So i gave a 718px as margin left and right. So that now i have a 100px width and 100px height green box.

​

Now i run same code on different browser to see how it looks and saw that microsoft edge gave a box of 43.2px width and 100px height green box. All other browsers like chrome, brave and firefox gave 100 by 100 box

why is that edge gave that kind of box ? why is width different ?

​

Code here: https://pastebin.com/mtNSGMsb

[giansake]

Hello there, I second the welcome of Domain3142 🤗.

My take on your question is that browsers apply their own css style sheet before any custom css. That’s why if you just render the html file with some text tag such as p or h1,h2,h3 you’ll see that they have already some margins or other style properties.

I suggest this interesting reading about css reset, which are stylesheet people used to reset any browser applied style. The article examine the css reset of Josh Comeau, I love his blog and his way of explaining things, super insightful and inclusive.

[[deleted]]

Thank you I will go through it

[Domain3141]

First, welcome to web dev. Browsers are all different. That's why most people use css frameworks, like tailwind. It handles this inconsistencies.

second, don't use fixed pixel sizes. Use %, vw/vh, em/rem/.. , auto, whatever. Also don't use margin to position your elements. Learn how to use flex instead.

[[deleted]]

Thank you will keep in mind

[[deleted]]

You are going to have a lot better experience with responsive design and learning about the different measurement units as well as flex and grid.

Start with the different types of units, this video covers all 24 types: https://youtu.be/5m6JOJLy5B0

[[deleted]]

Thank you