CODEWITHSUNDEEP
csshtml
dmrc1143
dmrc1143

Reputation: 91

using CSS properties

I started coding html website with CSS and <div>'s. Before, I would (en)code with tables. I have to ask this question because I don't know how can I code properly with CSS and <div>s.

I tried something but I found a lot of bugs and I asked all of them by this site. Now, for ex.: What is the different between the 'margin-top' and 'top' properties or 'margin' and 'top, left, right, bottom' properties.

I want to learn something like that. I know CSS so so but I want to learn properties of <div> tag. Please help me, Thanks a lot.

Edit: Not only margin or 'top, left, right, bottom' properties. I want to learn all of <div> tag properties and <div> tag positioning CSSs (properties). I need a lot of idea and document. Please write what do you know. :)

Upvotes: 2

Views: 88

Answers (3)

Sotiris
Sotiris

Reputation: 40066

If you set margin:5px will add margin for all sides of the element (top,right,bottom,left). If you want to specify the side of the margin, for example top, you can you use margin-top:5px. But also, you can use

margin:5px 10px 15px 20px this is a shorthand of the following properties

margin-top:5px;
margin-right:10px;
margin-bottom:15px;
margin-left:20px;

The same philosophy is used for padding.

An easy to follow guide for css is the following: http://www.cssbasics.com/

The css 2.1 recommendations can be found here: http://www.w3.org/TR/CSS21/

Using firebug or any built-in developer tools, it's great help to understand how css works and play easily with it.

Also, sitepoint has good css reference: http://reference.sitepoint.com/css

Upvotes: 1

Quentin
Quentin

Reputation: 943564

top moves an element in various different ways, depending on the value of the position property.

margin-top puts a space between the top of the element and the previous element (subject to the rules for collapsing margins)

Upvotes: 0

Jared Farrish
Jared Farrish

Reputation: 49208

I would suggest learning about the box model:

http://www.w3.org/TR/CSS2/box.html

And reference the W3C site for the DIV tag:

http://www.w3.org/wiki/HTML/Elements/div

And maybe read about CSS Reset scripts:

http://meyerweb.com/eric/thoughts/2007/04/18/reset-reasoning/

Upvotes: 4

Related Questions