Learning CSS Box Model

>

ProgrammerPro : There are some properties in the CSS box model such as Border, Padding, Margin, and HTML content itself. Each box model allows us to create a distance between the one with the other, so the box is a model of each column can be given a measure of the distance between each other so that the boxes do not appear fused column and look nicer to look at. In order to more easily understand, I will show the following illustration box model:

explanation:
Margin: allows us to limit the distance between the columns of the box with the other. margin does not have the background color (transparent)
Border - the border as well as enabling us to give the distance we can define a different border color of the background
Padding - allows us to create a layer on contet HTML, have the background but the background color depending on the content
Content - is the content like text and graphics in the columns of HTML elements such as div, p, h, and the other

Important to remember, if you set the width and height using CSS, you simply set the width and height in the content area. To enumerate all the elements, you must add padding, border and margin.

In the example code above is not the width of 250px, but 300px. Hmm .. why is that? Now let's count:

The example above is actually not be displayed correctly when using IE browser. CSS design that is smooth in another browser ie a lot of messy and a bit of an idea to solve this problem. To fix this problem, just add a DOCTYPE to the HTML page:

Well, finished already learned about the css box model. The material then we will know more about the border. Outline, margin and padding. So do not go everywhere, remains a serious study of his css