CODEWITHSUNDEEP
cssgoogle-chromereset
user2589071
user2589071

Reputation:

Chrome Adding Margin Different To Other Browsers

Version 95.0.4638.54 (Official Build) (x86_64) is adding additional padding or margin compared to Firefox and MS Edge.

This is what it looks like in MS Edge & Firefox with the icon inline with the menu text:

enter image description here

And Chrome makes it looks like this with the icon below the text:

enter image description here

This is the CSSS i am using :

.menu-toggle:before {
    content: '☰';
    font-size: 16px;
    color: black;
    font-weight: bold;
}

.menu-toggle.toggled-on:before {
    content: '\d7';
    font-size: 22px;
    color: red;
    font-weight: bold;
    margin-top: 0;
}

Do i need some type of reset or is something else the problem Maybe a prefix for chrome so i can target it with a different margin to display the x inline.

Upvotes: 0

Views: 401

Answers (1)

Dan P
Dan P

Reputation: 924

Many browsers will render things different, as they have varying default values for CSS attributes. The best way to deal with it in my opinion is to have some CSS to reset all these values to what you want.

I often use A Modern CSS Reset but another alternative is Normalize.css which has an npm package!

Just grab either of those, and bring them into your HTML before your own stylesheet, and it should look the same on every device.

Upvotes: 1

Related Questions