Margin is rendering differently in Firefox and Edge

HTML-CSS
1

Hi, How to show I to come to different Margin on Firefox and Edge…
In Firefox,

1
11226×379 106 KB

In Edge, Edge version 44

2
21176×404 28.8 KB

I have the Element aside for my Right Column to build,

aside  {
  grid-area: info;
   
    display: inline;
    margin: 1px;
    background-color: #d2f3c6;
    
}

this work for Firefox and these for Edge,

body > aside  {
        
        grid-area: info;
        display: -ms-grid;
        display: block;
        -ms-grid-column: 3;
        
        
        -ms-grid-row: 3;
         
       margin: 1px;
       background-color: #d2f3c6;
       margin-top: 60px;
      
    }

My Query for Desktop.

body {
    display: grid;
    display: -ms-grid; 
    background-color: #eaf6e5;
    grid-row-gap: 5px;
    grid-template:  
        
        "header header header" auto
        "nav nav nav" auto
        "main main gap1" 1em
        "main main werb" 11em 
        "main main gap2" 3em
        "main main info" 1fr
        "footer footer footer" auto / 8% 64% 28%;
        
       
       -ms-grid-columns: 8% 64% 28%;
       
       -ms-grid-gap: 5px;
    }

but how the screenshot to show Edge display different margin…in Firefox and Chrome Gut, only the Problem is on Edge…the advertising is from google I have it without div, how to show it,

3
3770×249 20.7 KB

2

In every browser, every element that has not been styled are given default value for sizing, margin, padding etc. However, every browser has their own set of values for every element and therefore are not the same. Hence, it looks different in every browser.

To solve this is to do a CSS reset. This is like a set of CSS rules to reset all elements’ margins and paddings to 0, then when you apply padding or margin to an element, it will look the same in every browser. Check this article for further information

I hope this will be what you are looking for. :slight_smile:

3

Very Thanks for your answer! , bot nothing to change…
on my aside Element write,

aside  {
  grid-area: info;
   
    display: inline;
    margin: 1px;
    background-color: #d2f3c6;
    margin-top: 0;
}

and on body > aside this,

body > aside  {
        
        grid-area: info;
        display: -ms-grid;
        display: block;
        -ms-grid-column: 3;
        
        
        -ms-grid-row: 3;
         
       margin: 1px;
       background-color: #d2f3c6;
       margin-top: 60px;
      
    }

but nothing change…i Thing that problem is that Edge can’t see the code from Google, therefore it to take his Place…

4

What @Madalena.design is mentioning is a reset of all margin and padding before ever setting it on an element. So you can put it back the way it was and add

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box; /* I do this for all my projects */
}

Make sure to add it to the top of the CSS file, this will set all the margin and padding to 0 for all browsers and should correct the problem.

1 Like
5

Very Thanks for your answer! , but nothing to change… I do like you to say to me, I add your Code to top of my CSS File,

4
4715×624 35.2 KB

but nothing to change…

6

Add the

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box; /* I do this for all my projects */
}

at the very top, before the body styling.

7

I do it, but nothing changes,
5

and when doing it change all my Website…

without you code,

6
6890×520 43.5 KB

with you code,

7
7883×489 62.9 KB