PRIVILEDGED ONES
ROOT ALCHEMY
Part 2 - HTML - Padding & Margin

In this part will push a bit further into the labyrinth and experiment with the padding the margin properties of the html element.

To make life a bit simpler, let's start with a test page - same one used as the starting point in the previous part of this article, where body < html < Peep-Hole (aka Screen):

C
S
S

html
{background: none #a52a2a;
width: 400px; height: 300px;
border: 5px solid #000000;}

body
{background: none #006700;
width: 300px; height: 200px;
margin: 0; padding: 0;}

#test
{background: none #fffacd;}

p
{font-family: sans-serif;
margin-top: 0px; padding: 4px;
font-size: large; font-weight: bold;}

H
T
M
L

<body>

<p>

This is some text....

</p>

</div>

</body>

Now, we will add the padding and margin properties to the html element, with values of both set to 0px:

ROOT202S		html {padding: 0px, margin: 0px;}

IExplorer 6.0	IExplorer 7.0	Mozilla 1.7	FireFox 1.5	Netscape 8.1	Opera 9.1

Padding

Setting padding property of the html element to 20px:

ROOT211S		html {padding: 20px, margin: 0px;}

IExplorer 6.0	IExplorer 7.0	Mozilla 1.7	FireFox 1.5	Netscape 8.1	Opera 9.1

As expected, the setting of the padding property is accepted by all the Browsers tested. Now, just for curiosity sake, let's see what will happen if we set padding property of the html element to -20px:

ROOT212S		html {padding: -20px, margin: 0px;}

IExplorer 6.0	IExplorer 7.0	Mozilla 1.7	FireFox 1.5	Netscape 8.1	Opera 9.1

As expected, negative values of the padding property is ignored by all the Browsers tested.

Margin

Let's start with setting margin property of the html element to 50px, while resetting the padding value to 0px:

ROOT221S		html {padding: 0px, margin: 50px;}

IExplorer 6.0	IExplorer 7.0	Mozilla 1.7	FireFox 1.5	Netscape 8.1	Opera 9.1

As expected, the setting of the margin property is ignored by IExplorer 6.0, but accepted by all the others. Again, just for curiosity sake, let's see what will happen if we set margin property of the html element to -50px:

ROOT222S		html {padding: 0px, margin: -50px;}

IExplorer 6.0	IExplorer 7.0	Mozilla 1.7	FireFox 1.5	Netscape 8.1	Opera 9.1

Well, well, well.. This labyrinth is full of surprises:

The negative values of the margin property is accepted by all browsers tested, except for IExplorer 6.0.
Another surprise is the activation of the Default Horizontal Scrollbar in Mozilla 1.7, FireFox 1.5 & Netscape 8.1.

To confirm that the Default Horizontal Scrollbar of Mozilla, Firefox & Netscape is activated due to negative right margin (due to wholesale specifying of the margin property), let's set only the margin-top and margin-left properties to -50px:

ROOT223S		html {margin-top: -50px;margin-left: -50px;}

IExplorer 6.0	IExplorer 7.0	Mozilla 1.7	FireFox 1.5	Netscape 8.1	Opera 9.1

This confirms the fact that the Default Horizontal Scrollbar of Mozzila/firefox & Netscape was activated due to the negative right margin!

However, this, in turn, raises another interesting question:
The width values greater than that of the Peep-Hole (aka Screen) did not activate the Default Horizontal Scrollbar, but a negative right margin did. Why?

What is Next?

At this point, I prefer not to make any comments or offer any opinions, but to continue our investigation following other branches of this labyrinth in Part 3 of this article.

Feed-back & Comments:: Please send any comments, opinions, and even contributions on this subject, using the Feed-Back Form.
Further Reading:: You can review the list of Related Articles, with brief descriptions and links on the Auxiliary Panel,

PRIVILEDGED ONES ROOT ALCHEMY Part 2 - HTML - Padding & Margin

Padding

Margin

What is Next?

Obvious is not ALWAYS Obvious!

PRIVILEDGED ONES
ROOT ALCHEMY
Part 2 - HTML - Padding & Margin