Wednesday, January 24, 2007

Linda's How-Do-I Series? How Do I Use Margins, Padding, and Borders?

If you've ever looked at the HTML coding for your website or looked at the CSS coding for in the template for your blog you have probably seen coding that looks like {margin:10px 0px 0px 0px} or {padding:25px 0px 10px 5%;border-top:double;}. It might even look like h1,h2,h3,h4,h6{padding:0px;margin:0px;}.

You may have wondered what that all means.

Well, here's what it means:

{} are the brackets to hold the CSS style formats. <> are the brackets to hold HTML code. So, if your were to see, for example, h1, h2, h3{padding:0px;margin:0px;} then this would mean to apply the sytle formats in the brackets to all the h1, h2, and h3 headings.

Header tags (IE: h1, h2, h3, h4, h5, and h6) are used for Various levels of headers, title and sub-titles. The sizes run from h1 which is the largest to h6 which is the smallest.

Borders around text or a picture can be solid, dotted or dashed. The width of the border is shown in pixels or px with 1px being the slimmest line. To darker the lines and thicken the border increase the pixel number, say from 1px to 3px, etc. Border sides are referred to as border-top, border-bottom, border-right, or border-left and can be specified one side at a time.

Margins and padding specify the amount of space around something. The only difference between the two is the margin is outside a border and the padding is inside a border. Margins and padding can be specified in CSS one side at a time or all at once, in which case the order is top, right, bottom, left (IE: clockwise direction).

Let's say we want the text "Linda Walsh Originals" to have a border around it. We would HTML code this as follows (minus the ***'s which are there so you can view the HTML in this article):

<***span style="border: 1px solid ;">Linda Walsh Originals<***/span>

and that would produce this:

Linda Walsh Originals

Now, let's say I want my border to be thicker I might increase the px # to 3. Here's the HTML coding for that (minus the ***'s which are there so you can view the HTML in this article):

<***span style="border: 3px solid ;">Linda Walsh Originals<***/span>

and that would produce this:

Linda Walsh Originals

Now, let's say I want my border to be thicker but I want some padding around the text. Here's the HTML coding for that (minus the ***'s which are there so you can view the HTML in this article):

<***span style="border: 3px solid ; padding: 15px;">Linda Walsh Originals<***/span>

and that would produce this:


Linda Walsh Originals


Now, let's say I have a two pictures that I want to show side by side. Here's the HTML coding for that (minus the ***'s which are there so you can view the HTML in this article):

<***img src="http://i24.photobucket.com/albums/c47/LWOriginals/BookReviewButton150x150.jpg" /><***img src="http://i24.photobucket.com/albums/c47/LWOriginals/LindasBlogButton150x150.jpg" />

And, that produces this:



Now, let's say I have a two pictures that I want to show side by side, but I want some margins around them. Here's the HTML coding for that (minus the ***'s which are there so you can view the HTML in this article):

<***img style=***"MARGIN: 15px" src="http://i24.photobucket.com/albums/c47/LWOriginals/BookReviewButton150x150.jpg" /><***img style=***"MARGIN: 15px" src="http://i24.photobucket.com/albums/c47/LWOriginals/LindasBlogButton150x150.jpg" />

And, that produces this:



Now, let's say I have two pictures that I want to show side by side, but I want a margin on the right hand side only. Here's the HTML coding for that (minus the ***'s which are there so you can view the HTML in this article):

<***img style=***"MARGIN-RIGHT: 15px" src="http://i24.photobucket.com/albums/c47/LWOriginals/BookReviewButton150x150.jpg" /><***img style=***"MARGIN-RIGHT: 15px" src="http://i24.photobucket.com/albums/c47/LWOriginals/LindasBlogButton150x150.jpg" />

And, that produces this:



Hopefully, this gives you a better idea of HTML coding for margins, padding, and borders.


No comments:

Post a Comment