Note that there are some explanatory texts on larger screens.

plurals
  1. PO
    primarykey
    data
    text
    <ul> <li><p>IE used to use the more-convenient-but-non-standard <strong>"border-box"</strong> box model. In this model, the width of an element includes the padding and borders. For example:<br> <code>#foo { width: 10em; padding: 2em; border: 1em; }</code><br> would be <code>10em</code> wide.</p></li> <li><p>In contrast, all standards-fearing browsers default to the <strong>"content-box"</strong> box model. In this model, the width of an element does <em>not</em> include padding or borders. For example:<br> <code>#foo { width: 10em; padding: 2em; border: 1em; }</code><br> will actually be <code>16em</code> wide: <code>10em</code> + <code>2em</code> padding for each side, + <code>1em</code> border for each edge.</p></li> </ul> <p>If you use a modern version of IE with <a href="http://validator.w3.org/" rel="noreferrer">valid markup</a>, a <a href="http://www.w3.org/QA/2002/04/valid-dtd-list.html" rel="noreferrer">good doctype</a>, and <a href="http://msdn.microsoft.com/en-us/library/cc288325(v=vs.85).aspx#SetMode" rel="noreferrer">appropriate headers</a> it will adhere to the standard. Otherwise, you can force modern standards-compliant browsers to use "border-box" via:</p> <pre><code>* { box-sizing: border-box; -moz-box-sizing: border-box; -webkit-box-sizing: border-box; } </code></pre> <p><em>The first declaration is needed for Opera, the second is for Firefox, the third is for Webkit and Chrome.</em></p> <p>Here's a simple test I made years ago for testing what box-sizing declaration your browser supports: <a href="http://phrogz.net/CSS/boxsizing.html" rel="noreferrer">http://phrogz.net/CSS/boxsizing.html</a></p> <p><em>Note that Webkit (Safari and Chrome) do not support the <code>padding-box</code> box model via any declaration.</em></p>
    singulars
    1. This table or related slice is empty.
    plurals
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. VO
      singulars
      1. This table or related slice is empty.
    2. VO
      singulars
      1. This table or related slice is empty.
    3. VO
      singulars
      1. This table or related slice is empty.
 

Querying!

 
Guidance

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload