- border
There are five separate border properties: border-top-width, border-right-width, border-bottom-width, border-left-width and border-color. If all your borders are the same then you can use the general property: border-width. These properties apply to all elements, in this example they have been applied to <em> and <strong> tags.
<html>
<head>
<style type="text/css">
<!--
body { background-color: #000000; font-family: comic sans ms }
p { color: red }
-->
</style>
</head>
<body>
<p>This is <strong style="color: white; border-width: medium; border-color: yellow">medium</strong> then
<em style="color: white; border-width: thin; border-color: blue">thin</em> and
<strong style="color: white; border-width: thick; border-color: yellow">thick</strong> then
<em style="color: white; border-bottom-width: medium; border-top-width: medium; border-color: red">bottom & top medium</em> and
<strong style="color: white; border-left-width: thick; border-right-width: thick; border-color: yellow">left & right thick.</strong>
</body>
</html>
As you can see the three possible values of border are medium, thin and thick.
- margin
There are four separate margin properties: margin-top, margin-right, margin-bottom and margin-left. If all your margins are the same then you can use the general property: margin. These properties apply to all elements.
<html>
<head>
<style type="text/css">
<!--
body { background-color: #000000 }
-->
</style>
</head>
<body text="white">
<p><strong style="border-width: medium; border-color: yellow; margin-left: 10%; margin-right: 20%; margin-top: 10%">medium</strong>
<strong style="border-width: thin; border-color: red; margin-left: 40%; margin-right: 30%; margin-top: 10%">thin</strong>
</body>
</html>
Each margin value is calculated from the last element on the page e.g. margin-top: 10% in the second box makes a '10% of the entire screen size' gap BETWEEN the two boxes.
- padding
There are four separate padding properties: padding-top, padding-right, padding-bottom and padding-left. If all your padding is the same then you can use the general property: padding. These properties apply to all elements.
<html>
<head>
<style type="text/css">
<!--
body { background-color: #000000 }
p { color:red }
-->
</style>
</head>
<body text="white">
<p>This is <strong style="color: white; border-width: medium; border-color: yellow; padding-top: 5%">medium</strong> then
<em style="color: white; border-width: thin; border-color: blue; padding-left: 5%">thin</em> and
<strong style="color: white; border-width: thick; border-color: yellow; padding-right: 10%">thick</strong>
</body>
</html>
As you can see you can have as much space around the html elements as you wish.
- width
This property changes the amount of space on the page the element occupies, it applies to block-level and replaced elements.
<html>
<head>
<style type="text/css">
<!--
body { background-color: #000000 }
p { color: red }
-->
</style>
</head>
<body text="white">
<p>This is <strong style="border-width: medium; border-color: yellow; width: 50%">medium.</strong>
This is <strong style="border-width: thick; border-color: blue; width: 70%">thick.</strong>
</body>
</html>
- float
This property allows the elements to float around the page. It has three values: none, left and right. This property applies to all elements.
<html>
<head>
<style type="text/css">
<!--
body { background-color: #000000 }
p { color: red }
-->
</style>
</head>
<body text="white">
<p>This is <strong style="border-width: medium; border-color: yellow; width: 50%">medium.</strong>
<em style="border-width: thin; border-color: blue; float: right">thin.</em>
<strong style="border-width: thick; border-color: blue; width: 70%">thick.</strong>
</body>
</html>
The interesting thing to note about this example is that not only does the thin box 'float' to the right but the thick box following is placed before it on the same line as though it does not exist.
