CSS Box Model diagram

CSS Box Model diagram

Here is an illustration of how the CSS-applied element is showing its size.

In this article, all browsers are consistent in how the margin property is handled when calculating the total width of the box model, so we'll focus more on the padding and border properties. Box Model

First look at "the box model", the standard written here, if no problem, it should be all the standard modern browser and IE6 and its subsequent version of the follow. In the box model, the total width of a block-level element is calculated according to the following equation:

Total width = margin-left + border-left + padding-left + width + padding-right + border-right + margin-right

The same calculation method is used for height, but for brevity I only say width from now on. IE Box model

The IE box model is computationally similar to the world wide, but one thing is very different: padding and borders are not included in the calculation.

Total width = margin-left + width + margin-right

This means that once an element has a horizontal fill and/or border, the actual content area is expanded to create the space they occupy. about the version of IE

IE5.5 and earlier versions use the IE box model. Many people do not seem to notice that IE6 and newer versions are using the box model standard in the standard compatibility mode (Standards compliant mode). We say this is good news because this means that the box model problem only appears in IE5.5 and earlier versions. If you set a DOCTYPE for a document, IE will work in the same way as the standard compatibility mode. solve the problem

Now that the IE6 and subsequent versions follow the standard compatibility model, the only thing to focus on now is how to make the pages in IE5.5 and earlier versions appear consistent in a more modern browser. If you are experiencing this problem now, here are a few ways to help you, and I have prioritized them in my preference. Avoid situations that cause this problem insert extra markup using conditional Comment judgment statement using CSS Hacks

Because the box model parsing method caused by the problem is often only for the appearance of the display, so my personal preference is to try to avoid triggering ie5.*/win this bug, and sometimes inevitably encountered, then I will use one of the methods described below. 1. Avoid situations that cause the problem

This is my first choice, very simple, is to avoid setting the width and padding values for an element at the same time, or width and border values, or width and their two values. This ensures that all browsers will calculate the total width of the elements in the same way, regardless of which box model they use.

Let me take an example to illustrate that the following HTML is used to define a news list:

<div id= "News" >
  
 
To get a 250-pixel-wide list and apply a 1-pixel border and a 10-pixel fill, this CSS is used:

#news {
  padding:10px;
  BORDER:1PX solid;
  width:228px;
}
 
In a standard-compliant browser, the total width is 250 pixels (1px left border + 10px left padding + width + 10px right padding + 1px right border). However, in IE5.5 and earlier versions, the total width was only 228 pixels because it did not calculate the border and padding values.

So how do you avoid this problem? Let's assume that the news list is in another container, like it's in the sidebar (sidebar):

<div id= "sidebar" >
  <div id= "News" >
    ...
  </div>
</div>
 
If so, you can set the width for the parent container (sidebar) to achieve the effect:

#sidebar {width:250px}
#news {
  padding:10px;
  border:1px solid;
}
 
2. Inserting additional markers 
If the situation does not allow you to use the first method, you can use the method of inserting additional tokens. Or use the previous example, this time we insert a tag inside the #news:

<div id= "News" >
  <div>
  
 
Use the following CSS:

#news {width:250px}
#news div {
  padding:10px;
  border:1px solid;
}
 
The outer elements provide a width, and the elements contained inside provide a border and padding.

The decision to use an additional token in this compromise way is the developer itself. The benefits of avoiding this approach are obvious, but an additional div tag will not have any other adverse effects other than increasing the size of the file and reducing the maintainability of the code. It does not affect the accessibility of the page and the readability of the document when the CSS document does not exist. In addition, adding an extra tag also facilitates some design implementations. 3. Use conditional comments to judge a statement

If you do not have the proper parent container to control the width, you cannot solve the problem by adding additional tags, which we need to set a different width value for IE 5.*/win.

My advice, the safest way to do this is to use conditional comment judgment statements (conditional comments), which can only be parsed in Ie/win, and the following code is only executed in the following versions of IE6:

<!--[if Lt IE 6]>
<style type= "Text/css" >
  #news {width:250px}
</style>
<![ Endif]-->
 
If you intend to use this method, I suggest that all the code for IE 5.*/win be transferred to a separate CSS file to load it:

<!--[if Lt IE 6]>
<link rel= "stylesheet" type= "Text/css" href= "/css/ie5.css" >
<![ Endif]-->
 
4. Using CSS hacks 
Finally you can also provide modified attribute values for IE 5.*/win by using a CSS hack (CSS hack). My advice is to try not to use CSS hacks. As the name implies, they are hacks,hacks based on the different browsers of the CSS parsing different caused by the undocumented error. Because there are still a lot of people using hacks, so I can mention here is no harm. Unless you know exactly what you're doing, I'd like to suggest that you use other methods as much as possible.

The simplest CSS hack for the box model problem is SBMH (the simplified box models hack), the HTML code for the case is the same as the first one, and the CSS is:

#news {
  padding:10px;
  BORDER:1PX solid;
  width:250px;
  width:228px;
}
 
All browsers will see and understand "width:250px", but IE 5.*/win will not read the following line, width:228px, but this row is parsed by the rest of the browser. So finally, IE 5.*/win get the width value is 250px, other browsers get 228px. In this way, the total width of our news list is consistent across all browsers.