window.$zopim||(function(d,s){var z=$zopim=function(c){z._.push(c)},$=z.s=d.createElement(s),e=d.getElementsByTagName(s)[0];z.set=function(o){z.set._.push(o)};z._=[];z.set._=[];$.async=!0;$.setAttribute("charset","utf-8");$.src="//v2.zopim.com/?319tMk2Y0B3sihWCob0GQdMtphY28wiP";z.t=+new Date;$.type="text/javascript";e.parentNode.insertBefore($,e)})(document,"script"); Boxtest | ചായില്യം | chayilyam

April 15, 2008 - Rajesh Odayanchal

Boxtest

Boxtest

Here is a sample div with class “boxtest”.

It has 20px border, 30px padding, and 300px width.

div.boxtest {
border:20px solid;
padding:30px;
background: #ffc;
width:300px;
}

The total width including borders and padding should be 400px.

20+30+300+30+20 = 400

User agents which misinterpret the CSS1 box model by placing border and padding inside the specified width would result in a total width of only 300px, and a content width of only 200px.

300-20-30-30-20 = 200

The red and blue bars below are there for comparison. This div (including its borders) should be as wide as the blue bar.

css / css tags / help css / css2 / css3 / help / tutorial /

Leave a Reply

Your email address will not be published. Required fields are marked *