FYI: Posts will be sparse around here until I replace my laptop.... Coming back to work after Christmas break apparently was too hard and it quit on me!

04 October 2011

Tuesday's Tips -CSS Basics Padding & Margins

I've posted many tutorials on how to create different things for your blog. In each of those tutorials I've mentioned ways that you can customize the object. I've gotten several questions asking for more ways to customize the CSS. So I'm going to start a little series on CSS Basics. Some of the topics will include backgrounds, borders, text styles, links, and more. That way you'll have a better understanding of what CSS codes you can add to customize the tutorials. =)

Padding & Margins Defined
Margin is the space between the item and other items.
Padding is the space between the content of the item and the edge of the item.
Padding & Margins and their placement
They can be placed on any side of the object or all around.
padding:
padding-right:
padding-left:
padding-top:
padding-bottom:


margin:
margin-right:
margin-left:
margin-top:
margin-bottom:


Padding & Margins and their size
They are measured in pixels(px) and can be positive or negative numbers.
20px;
-100px;
7px;

The Big Picture
Finished padding and margin code would look something like this:
padding:15px;
margin-left:30px;
margin-right:3px;

padding:5px;
margin-left:30px;
margin-right:3px;


2 comments:

Rebecca

Hi Emily Grace!! I want you to go to , http://blessingseveryminuteofmylife.blogspot.com, and look at ALL the things that your tutorials helped me do, they were SUCH a big help!

Also, I have a question, do you have ANY idea how I could center my post and date titles?? I have googled it, and can't figure it out:/

In Christ,
Rebecca

Emily Grace

You did a wonderful job on the design, Rebecca! I'm so glad that you found my tutorials helpful.
To center your post titles find this piece of code: 'h3.post-title' After it paste this code: 'text-align:center;'
The same goes for the dates on your post. Find: '.date-header' and paste 'text-align:center;' after it. Hope this helps!

In Christ,
Emily Grace

Post a Comment

Leave your thought...