Margin example:
<html>
<head>
<title>My page- name of my site</title>
<style>
div {
width: 200px;
text-align: center;
background-color: red;
}
#a {margin-left: 10px; background-color: #999999;}
#b {margin-right: 10px; background-color: #EEEEEE;}
#c {margin-top: 10px; background-color: #BBBBBB;}
#d {margin-bottom: 10px; background-color: #BBBB00;}
#e {margin: 10px 10px 10px 10px; background-color: #00BBBB;}
</style>
</head>
<body>
<h1>My page</h1>
Data shown on page (tables, text, images, links)
<div id = a >Text Text A</div>
<div id = b >Text Text B</div>
<div id = c >Text Text C</div>
<div id = d >Text Text D</div>
<div id = e >Text Text E</div>
<div id = f >Text Text F</div>
</body>
</html>
Padding example:
<html>
<head>
<title>My page- name of my site</title>
<style>
div {
background-color: red;
width: 200px;
text-align: left;
}
#a {padding-left: 10px; background-color: #AAAAAA; }
#b {padding-right: 10px; background-color: #EEEEEE;}
#c {padding-top: 10px; background-color: #000099;}
#d {padding-bottom: 10px; background-color: #666600;}
#e {padding: 10px 10px 10px 10px; background-color: #999900;}
</style>
</head>
<body>
<h1>My page</h1>
Data shown on page (tables, text, images, links)
<div id = a >Text Text A</div>
<div id = b >Text Text B</div>
<div id = c >Text Text C</div>
<div id = d >Text Text D</div>
<div id = e >Text Text E</div>
<div id = f >Text Text F</div>
</body>
</html>
Margin example- negative:
<html>
<head>
<title>My page- name of my site</title>
<style>
div {
background-color: red;
width: 100px;
height: 100px;
text-align: center;
}
#a {background-color: red;}
#b {margin-left: 10px; margin-top: -50px; background-color: blue;}
</style>
</head>
<body>
<div id = "a" >Text Text A</div>
<div id = "b" >Text Text A</div>
</body>
</html>
Padding example- negative. Negative padding don't work:
<html>
<head>
<title>My page- name of my site</title>
<style>
div {
background-color: red;
width: 100px;
height: 100px;
text-align: center;
}
#a {background-color: red;}
#b {padding-left: 10px; padding-top: -50px; background-color: blue;}
</style>
</head>
<body>
<div id = "a" >Text Text A</div>
<div id = "b" >Text Text A</div>
</body>
</html>
Margin property with table and div:
<html>
<head>
<title>My page- name of my site</title>
<style>
div {
background-color: red;
width: 100px;
text-align: center;
}
td { background-color: green; }
#a { margin: 50px 50px 50px 50px; }
</style>
</head>
<body>
<table align = "center">
<tr>
<td>
<div id = "a" >Text Text A</div>
</td>
</tr>
</table>
<table align = "center">
<tr>
<td>
<div>Text Text A</div>
</td>
</tr>
</table>
</body>
</html>
Share
