WebArtz - The Web Design Forum
Welcome to WebArtz, Guest!

WebArtz is a nice place for discussions related to web designing and coding. We help our members to code their own website templates with HTML and CSS. We give them advice on various issues.

To know more about WebArtz Forum, visit the About Us page.

At the moment, you are viewing the forum as a guest. As a guest you can't make post and participate in discussions. You need to register and become a member of the forum. Click the register link below and become a part of this forum.

Thank You

WebArtz - The Web Design Forum
Welcome to WebArtz, Guest!

WebArtz is a nice place for discussions related to web designing and coding. We help our members to code their own website templates with HTML and CSS. We give them advice on various issues.

To know more about WebArtz Forum, visit the About Us page.

At the moment, you are viewing the forum as a guest. As a guest you can't make post and participate in discussions. You need to register and become a member of the forum. Click the register link below and become a part of this forum.

Thank You


You are not connected. Please login or register

View previous topic View next topic Go down  Message [Page 1 of 1]

1Accespted Margin (and padding) Tue Nov 23, 2010 11:58 pm

Unknown Data

Unknown Data
Registered Member
Registered Member
Margin (and padding)
Learn CSS - part 12


Introduction
We are going through following steps, when we are learning about the margin:

• Margin-top
• Margin-right
• Margin-bottom
• Margin-left
• Mergin

Margin-top
Margin-top is simple, we are writing it like this, the value should always contain a number like height, width etc.
Code:
body {
margin-top: 50px;
}
Margin-right
The Margin-right is also very simple, and it's done like the Margin-top.
Code:
body {
margin-right: 25px;
}
Margin-bottom
Agian is it the same indication like the previous.
Code:
body {
margin-bottom: 20px;
}
Margin-left
The last point is Margin-left and that's exactly the same.
Code:
body {
margin-left: 25px;
}
Mergin the margin
It's possible to merge the margin, it can be done in following sequel.
margin-top | margin-right | margin-bottom | margin-left

We follow the clock by starting with Margin-Top and ends with Margin-left. And example could be like this.
Code:
body {
margin: 50px 25px 20px 25px;
}
Some other rules
Remember following rules, it could be noet.

• If only one value is written, will it apply to all sides (top, right, bottom, left).
• If two or three values is written, will the missing value be copid from the opposite side.

Remember!
I won't post a tutorial about padding, because it's actually the same as the margin. To use the padding, do you just have to replace the word margin with padding.

This was a very simple tutorial, and we can quick switch to the next tutorial.

Notice : This tutorial is copyrighted by WebArtz Forum. You may not publish it on anywhere without written permission from the administrators.

http://woops.dk

View previous topic View next topic Back to top  Message [Page 1 of 1]

Permissions in this forum:
You cannot reply to topics in this forum