The Basic Concept Of Css, “Box Model”

By this article I will tell you the basic concept of Css, “Box Model“. It is impossible to tell you all subjects about css here. Because of this if you do not know anything about css, please first have a look at the ccs tutorial at

• W3schools

Let’s talk about “Box Model”… Css accepts that all the objects (paragraph, images, link etc.) are some kind of boxes. Then you can replace your box where you want it to be. For a better explanation let me show you a picture.

content : This can be any kind of image, paragraph or form element like input.
margin: It is a transparent layer which is at the outside of the border. This helps you to align your object acccording to the other objects.
border: When you want to create a frame at the outside of your box, you can use border. It is not transparent like margin and padding (if you do not choosed the style “none”). If you widen and choose a style like solid, dashed etc. for your border, you will see the frame.
padding : It is just like margin. The difference is you use this to align your content according to the border, not to the other objects.
Let’s give an example by using margin, border and padding.

The code of the example above is

[css]
<div style="border: 4px solid ; width: 300px; margin-left: 25px; padding-left: 15px">This paragraph is our content. It’s width is 300px. Margin-left is 25px. Border (frame) width is 3px and style is solid. Inside the frame there is a paddin-left with 15px</div>
[/css]

Another example is the general structure of a wordpress theme.

Here you are a “Box Model”. We think all header footer, sidebar, content and container are boxes. Spaces between each other are created with margin. The content (yakuter.com) should be aligned by using padding. If you want you should make container’s border solid and 1px width. Then you will see that all your site is in a frame.

Now try these things I told and see the results.
In the following article about css, I will tell the difference between the internet explorer’s and firefox’s box model. And I will show how you can fix this problem(difference).