This page will focus on padding.
and, We will compare various effects using examples below.
(NOTE: I'm currently in the process of mapping-out this webpage.
|
(example 1)
This is how it normally looks.
(example 2)
the Padding feature can be changed.
In the example below; we will change the outer padding (on both Top and Bottom)
(...while the side paddings remain unchanged.)
padding: 13px 0.4px 13px 3px; (which as Top/Right/Bottom/Left)
(example 3)
The Far ends have extra padding.
In Row 1, the code is padding: 8px 3.4px 8px 13px;
and,
in Row 4, the code is padding: 8px 13px 8px 3.7px;
(notice: they're a near reverse image. Top/Right/Bottom/Left)
In Row 1, the 13px is on the Left padding.......On Row 4, the 13px padding is on the RIGHT.
(example 4)
Here; we're using a simpler 2-Value padding method.
padding: 6px 1px;
which translates to 6px TOP and BOTTOM.
...and 1px represents LEFT and RIGHT Padding.
Notice:
regardless of the entire box-size; the Top and bottom padding is always the same.
While the left and right sides are always thin.
Nothing is relative when using PX (pixels).
(example 5)
this is using the simplest padding method.
All sides are the same.
padding: 4px;
4px. Perfectly symmetrical on all sides.
|
|
|
|
(example 6)
We're changing the background-color.
Below; the outer area keeps a similar appearance.
Something like this: padding: 9px 1px 3px 1px;. The Top padding is always 9px.
However, the inner area uses padding in its conventional sense.
Usually, padding serves the function of providing space between the outer walls.
In the following examples; we'll show the effects of various padding sizes.
And, we're also highlighting the 'MOUSEOVER' effect in order to make padding more visible.
Just move your cursor over the center of each box; and you'll see the amount of padding within.
The Inner Box area 1 has padding: 9px;
The Inner Box area 2 has padding: 8px 26px 4px 18px;
and
The Inner Box area 3 has padding: 52px;.
Padding can provide a space from the edge in order to make things more attractive.
However, the drawback is that too much padding takes away the available space within the box.
SO, all written material can only appear within the text field.
(example 7)
The inner box area 1.
the fluorescent blue is padding size.
It's an even 9px all-around.
|
The inner box area 2.
Notice:
There's less padding on TOP and Bottom.
While there's MORE padding Left and Right.
|
The inner box area 3.
There's alot of padding.
52px
But, less area for text.
You can't write text outside the padding area. Therefore, it is all Wasted space.
|
No comments:
Post a Comment