About the difference between DIV margin attributes in Chrome and IE

This article mainly introduces the difference between DIV margin attributes in Chrome and IE. It has a certain reference value. Now I share it with you. Friends in need can refer to it

Suddenly, in What looks like a neat layout under Chrome turns into a mess under IE. In order to find out the reason, I did some tests and posted them to share with everyone

Suddenly, the layout that looked neat under Chrome turned into a mess under IE. To find out why, I changed the background-color property of p. Finally, I found that the width of the same p is different under IE and Chrome. It's so scary at night!
After that, I did a test. When:

p1 
{ 
width:960px; 
margin:0px; 
padding:0px; 
}

At this time, there is no difference between the two browsers! The total width is 960px.
But, when:

p1 
{ 
width:960px; 
margin:0px; 
padding:0px 10px 0px 10px; 
}

At this time, Chrome stops working. She actually added 20px of padding to the outside, so that the total width of p1 is 960px 10px 10px=980px; however, the width of p1 in IE is still 960px;
According to my thinking, I feel that padding should be included in the width. Wow, I didn’t expect Chrome to be so stubborn.
After testing, border is the same as padding, and the margin value is calculated outside of "width".
Also, when float is not set, Chrome will treat p1 as position: absolute, and IE will treat it as position: relative; therefore, try to use the float of this block-level element as left!
It’s so sad. The incompatibility of browsers makes me, a layman, very miserable!

The above is the entire content of this article. I hope it will be helpful to everyone's study. For more related content, please pay attention to the PHP Chinese website!

Related recommendations:

Implementation of @keyframes animation in CSS3

Click the button text to become the input box, click to save Realization of turning into text

Introduction to mobile web screen adaptation (rem)

The above is the detailed content of About the difference between DIV margin attributes in Chrome and IE. For more information, please follow other related articles on the PHP Chinese website!