Introduction The margin of a box is the distance between the border of a box and its parent or container. Because a box has four sides, it also supports margins on all sides. Consider the following code: <!DOCTYPE html>
<html>
<head>
<title>Earth Science</title>
<style type="text/css">
.central
{
width: 500px;
background-color: Blue;
border: thin black double;
}
.description
{
text-align: justify;
color: #99CCFF;
font: 14pt, Times New Roman, Garamond, Georgia, serif;
}
</style>
</head>
<body>
<section class="central">
<p class="description">Earth science is the group of studies that explores all
types of issues related to the planet. The studies consider such topics as the
earth layers, the atmosphere, the seasons, the climate, the oceans, etc. In
reality, the topics are categorized in history, geography, geology, ecology,
physics, etc. Other earth-related topics include the atmosphere, the biosphere,
the hydrosphere, etc.</p>
</section>
</body>
</html>
This would produce:
A Margin by Side CSS supports the ability to control the margin on each side of a box. The style that controls the margin on each side has its own name. For example, the style to control the margin on the left side is named margin-left. Its value can be an HTML-based number. Here is an example: <!DOCTYPE html>
<html>
<head>
<title>Earth Science</title>
<style type="text/css">
.central
{
width: 500px;
background-color: Blue;
border: thin black double;
}
.description
{
margin-left: 2.05em;
text-align: justify;
color: #33CCFF;
font: 14pt, Times New Roman, Garamond, Georgia, serif;
}
</style>
</head>
<body>
<section class="central">
<p class="description">Earth science is the group of studies that explores all
types of issues related to the planet. The studies consider such topics as the
earth layers, the atmosphere, the seasons, the climate, the oceans, etc. In
reality, the topics are categorized in history, geography, geology, ecology,
physics, etc. Other earth-related topics include the atmosphere, the biosphere,
the hydrosphere, etc.</p>
</section>
</body>
</html>
This would produce:
In the same way, the style to control the margin in the top section is named margin-top. The style to control the margin on the right side is named margin-right and the style to control the margin at the bottom of a box, a section, or an element is named margin-bottom. Here are examples of applying the margins on all four sides of an element: <!DOCTYPE html>
<html>
<head>
<title>Earth Science</title>
<style type="text/css">
.central
{
width: 500px;
background-color: Blue;
border: thin black double;
}
.description
{
margin-left: 2.05em;
margin-right: 10pt;
margin-top: 1.02em;
margin-bottom: 50px;
text-align: justify;
color: #99CCFF;
font: 14pt, Times New Roman, Garamond, Georgia, serif;
}
</style>
</head>
<body>
<section class="central">
<p class="description">Earth science is the group of studies that explores all
types of issues related to the planet. The studies consider such topics as the
earth layers, the atmosphere, the seasons, the climate, the oceans, etc. In
reality, the topics are categorized in history, geography, geology, ecology,
physics, etc. Other earth-related topics include the atmosphere, the biosphere,
the hydrosphere, etc.</p>
</section>
</body>
</html>
This would produce:
The 0 Margin A margin value can be set to 0, which is a special value. The value 0 means that the box will be glued to the corresponding side of the parent. Here is an example: <!DOCTYPE html>
<html>
<head>
<title>Earth Science</title>
<style type="text/css">
.central
{
width: 500px;
background-color: Blue;
border: thin black double;
}
.description
{
margin-left: 0.00em;
margin-right: 10pt;
margin-top: 1.02em;
margin-bottom: 50px;
text-align: justify;
color: #99CCFF;
font: 14pt, Times New Roman, Garamond, Georgia, serif;
}
</style>
</head>
<body>
<section class="central">
<p class="description">Earth science is the group of studies that explores all
types of issues related to the planet. The studies consider such topics as the
earth layers, the atmosphere, the seasons, the climate, the oceans, etc. In
reality, the topics are categorized in history, geography, geology, ecology,
physics, etc. Other earth-related topics include the atmosphere, the biosphere,
the hydrosphere, etc.</p>
</section>
</body>
</html>
This code would produce:
In the same way, you can apply the desired values to the other margins. Remember that, when a value is set to 0, it doesn't need a unit: The 0 value can just be written by itself. Here are examples: .description
{
margin-left: 0;
margin-top: 0;
margin-right: 0;
margin-bottom: 0;
text-align: justify;
color: #99CCFF;
font: 14pt, Times New Roman, Garamond, Georgia, serif;
}
This would produce:
In the same way, you can use this feature to apply a margin to set the distance between the content of a box or element (such as text in an element or section) and the border(s) of the box or object. A Common Margin Instead of setting the margins one side at a time, CSS provides a common style named margin. It can take 1 to 4 values:
The Body Element As you may know already, the body element is the parent of all HTML elements of a webpage. Therefore, if you want all elements of a webpage to be positioned based on the borders of a webpage, set its margin style to 0. Here is an example: <!DOCTYPE html>
<html>
<head>
<title>Earth Science</title>
<style type="text/css">
body {
margin: 0;
background-color: #19375F;
}
#head-part
{
top: 0;
height: 2.75em;
border-bottom: 3pt #CC9900 solid;
}
#main-title
{
text-align: center;
color: #FFFF00;
font: bold, 24pt, Bodoni, Georgia, Garamond, serif;
}
.central
{
background-color: Blue;
border: thin black double;
border-bottom: 3pt #CC9900 solid;
}
.description
{
margin: 1.02em;
text-align: justify;
color: #FFFFFF;
font: 14pt, Times New Roman, Garamond, Georgia, serif;
}
#links {
color: #FFF;
text-align: center;
}
a.reference:link, a.reference:active,
a.reference:visited, a.reference:hover
{
font-weight: 500;
font-size: 12pt;
text-decoration: none;
}
a.reference:link { color: #FFCCCC }
a.reference:active { color: #66CCFF }
a.reference:visited { color: #FF9933 }
a.reference:hover
{
color: #FFFF00;
background-color: #003399;
outline: White solid 1pt;
}
</style>
</head>
<body>
<header id="head-part">
<h1 id="main-title">Earth Science</h1>
</header>
<section class="central">
<p class="description">Earth science is the group of studies that explores all
types of issues related to the planet. The studies consider such topics as the
earth layers, the atmosphere, the seasons, the climate, the oceans, etc. In
reality, the topics are categorized in history, geography, geology, ecology,
physics, etc. Other earth-related topics include the atmosphere, the biosphere,
the hydrosphere, etc.</p>
<p class="description">Earth science is not confined to just the physical planet
but also to its environment. To start, its history first considers what might
have happened millions of years ago up to the current time. As a matter of fact,
part of studying the earth is to consider other planets in order to evaluate
its relationships and differences with those other places.</p>
</section>
<footer>
<p id="links"><a href="geography" class="reference">Geography</a> |
<a href="Ecology" class="reference">Ecology</a> |
<a href="geology" class="reference">Geology</a></p>
</footer>
</body>
</html>
This would produce:
The Auto Margin If you set the width of a box to a constant value, you can still specify the margin to a side and value of your choice. On the other hand, if you want the box, section, or element to be centered on the webpage, set the margin style to a value of auto. Here is an example: <!DOCTYPE html>
<html>
<head>
<title>Earth Science</title>
<style type="text/css">
body {
margin: 0;
background-color: #19375F;
}
#head-part
{
top: 0;
height: 2.75em;
border-bottom: 3pt #CC9900 solid;
}
#main-title
{
text-align: center;
color: #FFFF00;
font: bold, 24pt, Bodoni, Georgia, Garamond, serif;
}
.central
{
margin: auto;
width: 500px;
background-color: Blue;
border: thin black double;
}
.description
{
margin: 1.02em;
text-align: justify;
color: #FFFFFF;
font: 14pt, Times New Roman, Garamond, Georgia, serif;
}
#bottom-part {
border-top: 3pt #CC9900 solid;
}
#links {
text-align: center;
color: #FFF;
}
a.reference:link, a.reference:active,
a.reference:visited, a.reference:hover
{
font-weight: 500;
font-size: 12pt;
text-decoration: none;
}
a.reference:link { color: #FFCCCC }
a.reference:active { color: #66CCFF }
a.reference:visited { color: #FF9933 }
a.reference:hover
{
color: #FFFF00;
background-color: #003399;
outline: White solid 1pt;
}
</style>
</head>
<body>
<header id="head-part">
<h1 id="main-title">Earth Science</h1>
</header>
<section class="central">
<p class="description">Earth science is the group of studies that explores all
types of issues related to the planet. The studies consider such topics as the
earth layers, the atmosphere, the seasons, the climate, the oceans, etc. In
reality, the topics are categorized in history, geography, geology, ecology,
physics, etc. Other earth-related topics include the atmosphere, the biosphere,
the hydrosphere, etc.</p>
<p class="description">Earth science is not confined to just the physical planet
but also to its environment. To start, its history first considers what might
have happened millions of years ago up to the current time. As a matter of fact,
part of studying the earth is to consider other planets in order to evaluate
its relationships and differences with those other places.</p>
</section>
<footer id="bottom-part">
<p id="links"><a href="geography" class="reference">Geography</a> |
<a href="Ecology" class="reference">Ecology</a> |
<a href="geology" class="reference">Geology</a></p>
</footer>
</body>
</html>
This would produce:
The auto-margin feature is very valuable when it is necessary to center a group of objects. You can put objects or element in a section or box and then apply the feature on that section or box. You can also create a group of identifiers or classes that must be centered in your webpage and apply the style to that group. Here is an example: <!DOCTYPE html>
<html>
<head>
<title>Psychology</title>
<style>
body { margin: 0;
background: radial-gradient(at 75%, #400, Bisque); }
#top-portion, .container, #links-bar, #bottom-container
{
margin: auto;
width: 600px;
}
#links-bar { border-bottom: 2pt dotted #400; }
#top-title
{
text-align: center;
color: #FFFAFA;
border-bottom: 2pt dotted #400;
text-shadow: 0.14cm 0.14cm 0.12cm #400;
font: bold 28pt Bodoni, Elephant, Times, serif;
}
.description
{
color: yellow;
text-align: justify;
font: normal 14pt Times New Roman, Garamond, Times, serif;
}
#links-bar { height: 32px }
#bottom-portion
{
border-top: 3pt solid #400;
background: linear-gradient(270deg, #AF550A 50%, #400 90%, #AF550A 100%); }
}
#links-bar { background-color: #AF550A }
#links-bar p
{
float: right;
margin-top: -0.05em;
}
a.lnk-btn:link, a.lnk-btn:active, a.lnk-btn:visited, a.lnk-btn:hover
{
height: 32px;
line-height: 32px;
font-size: 14px;
text-decoration: none;
width: 70pt;
text-align: center;
outline: 1pt solid #FF9B00;
font-family: Meiryo, Segoe UI, sans-serif
}
a.lnk-btn:link
{
background-color: #400;
display: inline-block;
color: #FF9B00;
}
a.lnk-btn:active { color: #00FFFF }
a.lnk-btn:visited { color: #669BFF }
a.lnk-btn:hover
{
color: #FFFF00;
background-color: #AF550A;
}
#dealing, #exploration, #resources
{
float: left;
width: 145pt;
}
#exploration, #resources { border-left: 1pt dashed #FFFFCC; }
#bottom-portion { height: 160px }
#dealing ul, #exploration ul, #resources ul { list-style-type: none; }
#dealing a:link, #dealing a:active, #dealing a:visited, #dealing a:hover,
#exploration a:link, #exploration a:active,
#exploration a:visited, #exploration a:hover,
#resources a:link, #resources a:active, #resources a:visited, #resources a:hover
{
text-decoration: none;
font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif
}
#dealing a:link, #exploration a:link, #resources a:link
{
color: #FFCC00;
}
#dealing a:active, #exploration a:active, #resources a:active { color: #999966 }
#dealing a:visited, #exploration a:visited, #resources a:visited { color: #FF99FF }
#dealing a:hover, #exploration a:hover, #resources a:hover
{
color: #FFFF99;
text-decoration: underline;
}
.psychohead
{
font-weight: bold;
font-size: 14pt;
display: block;
color: Orange;
border-left: 1pt dashed white;
border-bottom: 1pt dashed white;
}
#resources { border-right: 1pt dashed #FFFFcc }
#bottom-portion
{
bottom: 0;
width: 100%;
top: auto;
height: auto;
position: absolute;
}
</style>
</head>
<body>
<div id="top-portion">
<p id="top-title">Psychology</p>
</div>
<div id="links-banner">
<div id="links-bar">
<p><a class="lnk-btn" href="aboutus.htm">About Us</a></p>
<p><a class="lnk-btn" href="library.htm">Library</a></p>
<p><a class="lnk-btn" href="academia.htm">Academia</a></p>
<p><a class="lnk-btn" href="socialsciences/index.htm">Home</a></p>
</div>
</div>
<div class="container">
<p class="description">Psychology is a social science field that focuses on
the mind as it relates to human thoughts and behaviors. On one hand,
psychology gets inputs from sociology, philosophy, medicine, and ethnicity,
etc. on the other hand, psychology has a great influence on all sciences
that deal with personal views and actions.</p>
<p class="description">Psychology does not exclusively targets the
individual but it also considers any aspect in the person's environment.
As a matter of facts, there are various fields of studies that derive from
psychology.</p>
</div>
<div id="bottom-portion">
<div id="bottom-container">
<div id="dealing">
<ul>
<li class="psychohead">Dealing With ...</li>
<li><a href="healing.htm">Healing</a></li>
<li><a href="leadership.htm">Leadership</a></li>
<li><a href="addictions.htm">Addictions</a></li>
<li><a href="self-esteem.htm">Self-Esteem</a></li>
<li><a href="achievements.htm">Achievements</a></li>
</ul>
</div>
<div id="exploration">
<ul>
<li class="psychohead">Exploring ...</li>
<li><a href="psychotherapy.htm">Psychotherapy</a></li>
<li><a href="therapy.htm">Family Therapy</a></li>
<li><a href="technologies.htm">Psycho-Technologies</a></li>
<li><a href="child-development.htm">Child Development</a></li>
<li><a href="politics.htm">Political Science</a></li>
</ul>
</div>
<div id="resources">
<ul>
<li class="psychohead">Resources</li>
<li><a href="education.htm">Education/Degrees</a></li>
<li><a href="professions.htm">Professions</a></li>
<li><a href="helplines.htm">Help Lines</a></li>
<li><a href="online.htm">Online Resources</a></li>
<li><a href="contactus.htm">Contact Us</a></li>
</ul>
</div>
</div>
</div>
</body>
</html>
This would produce:
You can also combine the 0 and the auto vallues on the margin style to indicate that you want the first value, 0, to apply to the top and the bottom margins while the box or element would be centered. Here is an example: <html>
<head>
<title>Social Science: Philosophy</title>
<style type="text/css">
body
{
margin: 0;
background-color: #375f91;
}
#title-banner
{
padding-top: 0;
height: 50pt;
width: 100%;
background-color: #192E46;
border-bottom: 1pt solid #FFBE00;
}
#navibar
{
width: 100%;
height: 35px;
background: linear-gradient(#004080, #3399FF, #004080);
border-bottom: 1pt solid #FFBE00;
}
#general-container, #bottom-banner, #navigator
{
margin: 0 auto;
width: 600px;
}
.main-title
{
font-weight: bold;
color: #FF0;
padding-top: 0.35em;
font-size: 1.26cm;
text-align: center;
text-shadow: 0.10em 0.10em 0.20em LightBlue;
font: bold 24pt Georgia, Garamond, serif;
}
#central { outline: 1pt dashed orange }
.description
{
font-size: 12pt;
color: #F5F032;
text-align: justify;
font-family: Calibri, AvantGarde BkBT, Arial, sans-serif;
}
#navigator
{
width: 600px;
margin: 0 auto;
top: -1.00em;
position: relative;
}
.link-box
{
float: left;
text-align: center;
}
#navigator a:link, #navigator a:active,
#navigator a:visited, #navigator a:hover
{
height: 35px;
text-decoration: none;
width: 90pt;
line-height: 2.00em;
display: inline-block;
border-left: 1pt solid #99CCFF;
font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
}
#navigator a:link
{
color: Aqua;
background: linear-gradient(#00254A, #8CC6FF, #00254A);
}
#navigator a:active { color: #999966 }
#navigator a:visited { color: #FF99FF }
#navigator a:hover
{
color: #FFFF99;
background: linear-gradient(#004080, #3399FF, #004080);
}
#navigator p
{
width: 90pt;
color: #FFFF99;
}
.philosophic
{
margin: 0 auto;
display: table;
outline: 3pt gray groove;
}
.philo-heading { display: table-row }
.philo-field, .philo-topic, .philo-issues,
.philo-value1, .philo-value2
{
height: 20pt;
line-height: 20pt;
display: table-cell
}
.philo-field, .philo-topic, .philo-issues
{
background-color: #333333;
outline: 1pt solid Gray;
}
.philo-field { width: 110pt }
.philo-topic { width: 70pt }
.philo-issues2 { width: 200pt }
.philo-title
{
height: 26pt;
line-height: 26pt;
font-weight: bold;
color: white;
font-family: "Comic Sans MS", Tahoma, sans-serif;
}
.philo-value2
{
background-color: Silver;
outline: 1pt solid #FFF;
}
#bottom-banner
{
outline: 2pt solid #FFBE00;
background: linear-gradient(#004080, #0066FF);
}
#copyright
{
line-height: 2.00em;
text-align: center;
color: #FFCC00;
outline: 1pt solid orange;
}
#branches, #history, #resources { float: left }
#branches a:link, #branches a:active, #branches a:visited, #branches a:hover,
#history a:link, #history a:active, #history a:visited, #history a:hover,
#resources a:link, #resources a:active, #resources a:visited, #resources a:hover
{
height: 26px;
font-size: 12pt;
line-height: 26px;
text-decoration: none;
display: inline-block;
font-family: "Franklin Gothic Medium", "Arial Narrow", Arial, sans-serif;
}
#branches, #branches a:link, #branches a:active,
#branches a:visited, #branches a:hover { width: 170px }
#history, #history a:link, #history a:active,
#history a:visited, #history a:hover { width: 150pt }
#resources, #resources a:link, #resources a:active,
#resources a:visited, #resources a:hover { width: 165pt }
#branches a:link, #history a:link, #resources a:link { color: #FFFF00 }
#branches a:active, #history a:active, #resources a:active { color: #CC99FF }
#branches a:visited, #history a:visited, #resources a:visited { color: #FFCC99 }
#branches a:hover, #history a:hover, #resources a:hover
{
color: #FFCCFF;
background-color: #0066CC;
display: inline-block;
outline: 1pt solid #CCFF33;
}
</style>
</head>
<body>
<div id="title-banner">
<p class="main-title">Philosophy</p>
</div>
<div id="navibar">
<div id="navigator">
<p class="link-box"><a href="index1.htm">Home</a></p>
<p class="link-box"><a href="research.htm">Research</a></p>
<p class="link-box"><a href="resources.htm">Resources</a></p>
<p class="link-box"><a href="aboutus.htm">About Us</a></p>
<p class="link-box"><a href="contact.htm">Contact Us</a></p>
</div>
</div>
<div id="general-container">
<div id="central">
<p class="description">Philosophy is the study of existense (or being),
knowledge (or reasoning), and truth. Philosophy seeks to comprehend what
truth is, how to evaluate it, and how it influences thoughts and ethics.
Like other social science topics such as sociology or psychology, philosophy
examines both personal and crowd behavior but only as they relate to the
mind. An example is the thinking process that results in someone taking one
action rather than another (another person taking the same action or another
person taking a different action). Unlike the other social science fields,
philosophy doesn't concentrate on what is good or bad, or what is practical
or weird, or on how something should (is supposed to) be. Instead,
philosophy delves into the logic and the ethical reasons of what it (such
as something or a behavior) is.</p>
<p class="description">Some of the most regular fields of study in philosophy
are:</p>
</div>
<div class="philosophic">
<div class="philo-heading">
<div class="philo-field philo-title">Philosophic Field</div>
<div class="philo-topic philo-title">Topic</div>
<div class="philo-issues philo-title">Issues</div>
</div>
<div class="philo-heading">
<div class="philo-value1">Epistemology</div>
<div class="philo-value1">Knowledge</div>
<div class="philo-value1">Truth, perception, belief, justification</div>
</div>
<div class="philo-heading">
<div class="philo-value2">Logic</div>
<div class="philo-value2">Reason</div>
<div class="philo-value2">Deduction (deductive reasoning)<br>
Induction (inductive reseaning)</div>
</div>
<div class="philo-heading">
<div class="philo-value1">Metaphysics</div>
<div class="philo-value1">Reality</div>
<div class="philo-value1">Existence, time, causality</div>
</div>
<div class="philo-heading">
<div class="philo-value2">Aesthetics</div>
<div class="philo-value2">Beauty</div>
<div class="philo-value2">Art, beauty, taste</div>
</div>
</div>
</div>
<footer id="bottom-banner">
<div id="branches">
<p><a href="natural.htm">Natural Philosophy</a><br>
<a href="physical.htm">Physical Philosophy</a><br>
<a href="moral.htm">Moral Philosophy</a></p>
</div>
<div id="history">
<p><a href="philosophers.htm">Philosophers</a><br>
<a href="comparisons.htm">Ancient/Contemporary</a><br>
<a href="majors.htm">Universities</a></p>
</div>
<div id="resources">
<p><a href="philosophers.htm">Philosophers</a><br>
<a href="comparisons.htm">Ancient/Contemporary</a><br>
<a href="majors.htm">Universities/Colleges/Majors</a></p>
</div>
<p id="copyright">Copyright ©, 2015</p>
</footer>
</body>
</html>
This would produce:
| ||||
