This page will focus on MARGINS.
It's often confused with Padding.
Margins represent the outer, while padding is inner.
According to w3schools;
The CSS margin properties are used to create space around elements, outside of any defined borders.
Note however that our listing method often creates an alternative context.
|
Example 1
Let's start by showing a standard sequence.
It's using the basic features found on IQGO.
Very little margin is being implemented within these Rows.
However, the gap between the outer gray block is a MARGIN.
It's 20px above and below. Written in CSS code as margin: 20px 0px;
Example 2
Here. We're not tampering with Box Rows.
We're only changing the outer margin to 5px.
Example 3
Here, we'll create an uneven margin for Top and Bottom.
The sequence reads: margin: 10px 0px 40px 0px;
which means, there's 10px margin on top, and a large 30px margin on bottom.
Example 4
In this example; we'll remove the top margin, and make a large bottom margin.
It reads margin: 0px 0px 70px 0px;
Example 5
(cellpadding is set to "3").
Within each box, we're setting the right-margin to 10px.
You can begin to see why people often confuse padding with margin.
In rows 1,2, and 3, margin-right: 10px;.
Example 6
Here, we'll create a Left and Right margin of 10px within each box.
Plus, 4px on Top and Bottoms.
So, it reads as follows: margin:1px 10px 4px 10px;
Example 7
When doing these listings; we rarely use the margin feature for the outer boxes.
They tend to position the entire box in an altered location.
Here, we'll alter the margins of Box#2 and Box#4 (while leaving Box1 and Box3 alone).
Notice how creating the margin causes Box#2 and Box#4 to position much lower.
The code is margin-top:80px;
Example 8
We'll be setting margins in box#1 and Box#3.
and it only applies to the inner box.
In box#1, the code is margin-top:50px;
and
in Box#3, the code is margin:50px;.
The Top-lines remain in the same location.
while the inner box moves to an altered location.
Example 9
Here. I will only tamper with box#2.
I will set the Top-margin to 100px.
the code is margin-top:100px;
and, in this case, it was implimented in the outer box.
Notice how the entire box is positioned in a different location.
Example 9
table border="0" cellpadding="8" cellspacing="3"
(I'm also increasing the width from 90% to 99%)
No comments:
Post a Comment