What is Padding and Margin?

What is Padding and Margin?
I know many of us (web developer newbies) are already using/editing Padding and Margin in our sites (especially Padding) but don't what really are those! ツ
When I make a research about this terms, I found this Site that answered my question clearly....
a big thanks to the author... ツ


In this post I will explain padding and margin and their purpose.

First I will explain the difference between the two.

Padding is like a inside spacing where margin is a outside spacing. Both work in the same way with about the same effect.


Now the values of them can be used differently.

You can have one of the several
in
px
em
pt
%

Now their are may ways to get the same effect with padding and margin

You can specify which side like this

padding-top:25px;
padding-bottom:25px;
padding-right:50px;
padding-left:50px;

Now you can also use padding in one line by doing something like this. All 3 of these below will give you the same effect as the code above.

padding: 25px 50px; ( 2 digit)

padding 25px 50px 25px 50px (4 digit)

padding 25px 50px 25px (3 digit)

With 2 digit padding or margin the first digit is top and bottom where the second is left and right.

With 4 digit padding or margin it works like a clock. top, right, bottom, and left.

With 3 digit it padding or margin the first digit is top, the second is left and right and the third is bottom.

SOURCE

Read More Here...

Aligning and Positioning Widget/Gadget in Blogger

Aligning and Positioning your Widget/Gadget is also one of the important tricks you must know in blogger, so that you can put it everywhere in your page while disregarding the default template...
Sounds interesting, right? ツ
Normally, it is used to put your Search Box aligned to your header banner but you really need to have a Trial and Error Method for you have the perfect position of your Widget/Gadget.
But don't worry, the process are very simple! ツ

1st. You need to Locate The Widget/GadgetID#
 (just click the link above to know how...)
2nd. go to Design-->Template Designer-->Advanced--> Add CSS--> Input one of the codes below:

This is for basic text alignment. Replace the Orange with center, left, or right

#GadgteID# {
text-align: center;
}

This is for a more precise alignment.You can use Padding & Margin

#GadgetID# {
padding: 0px 0px 0px 0px
}

You can also use a code like this to fit your needs.

#GadgetID# {
position:absolute;
left:100px;
top:150px;
}

This would display your gadget  100px off the left side of your browser screen and 150px off the top. You can adjust this to your liking.

Their are a few different types of positioning variables you can use.

absolute:  Generates an absolutely positioned element, positioned relative to the first parent element that has a position other than static. The element's position is specified with the "left", "top", "right", and "bottom" properties

fixed:  Generates an absolutely positioned element, positioned relative to the browser window. The element's position is specified with the "left", "top", "right", and "bottom" properties

relative:   Generates a relatively positioned element, positioned relative to its normal position, so "left:20" adds 20 pixels to the element's LEFT position

static:   Default. No position, the element occurs in the normal flow (ignores any top, bottom, left, right, or z-index declarations)

inherit:    Specifies that the value of the position property should be inherited from the parent element

SOURCE

Read More Here...

Locate Widget/Gadget ID's in Blogger

This stuff is very important if you'll going to  edit something in your blogger's HTML area since you need to know what's you'll gonna type in your Find box (Ctrl+F) to make editing much easier.

Just follow this very simple steps to locate the ID of your Widget/Gadget:

1. Go to Design-->Page Elements.
2. Click the Edit Option on the Widget/Gadget.
3. Once the Widget/Gadget Opens you should see something like this below. 

(TIP: maximize your Widget/Gadget window)

(Click the photo to enlarge)

The section in red is the Widget/Gadget ID#.
For this gadget I have here my ID is Label1.
This is case sensitive so copy it just as you see it.

SOURCE

LinkWith

Read More Here...