Lesson 27: Padding the Contents of a Box

	Padding the Contents of a Box

Introduction

Padding consists of setting the distance between a border of an object and its content. This operation is referred to as padding. Like margins, the padding operation applies to each side of the box or element. The styles used to manage padding on each side are:

padding-left: The distance between the left border of the box and its content
padding-top: The distance between the top border of the box and its content
padding-right: The distance between the right border of the box and its content
padding-bottoom: The distance between the bottom border of the box and its content

A padding style can take:

An HTML-based number as value: Here are two examples:

<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
{
	padding-top: 0.35em;
    font-weight: bold;
    color:       #FF0;
    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
{
    padding-left:  1.15em;
    padding-right: 1.15em;
    font-size:     12pt;
    text-align:    justify;
    color:         #F5F032;
    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
{
    border-left: 1pt solid  #99CCFF;
    height:          35px;
    text-decoration: none;
    width:           90pt;
    line-height:     2.00em;
    display:         inline-block;
    font-family:     "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
}
#navigator a:link
{
    color:      Aqua; /* #FFCC00; */
    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
{
    background: linear-gradient(#004080, #0066FF);
    outline:          2pt solid #FFBE00;
}
#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 &copy;, 2015</p>
</footer>

</body>
</html>

This would produce:

Padding the Contents of a Box

A percentage value

A Common Padding Style

In the absence of padding, the content of a box or element aligns with its closest border. Here is an example:

<html>
<head>
<title>Chemistry</title>

<style type="text/css">
body {
    margin:     0;
    background: radial-gradient(at 75%, #0066CC, #99CCFF); 
}
#description {
    left:       0;
    margin:     auto;
    width:      400pt;
    top:        1.50em;
    background: #D7EBFF;
    position:   relative;
    border:     1pt solid Black;
}
p {
    text-align: justify;
    font:       12pt Times New Roman, Garamond, serif;
}
</style>
</head>
<body>
<p id="description">Chemistry is the study of matter. Matter is the building block 
  of anything in the environment, that is, anything that occupies any form of space, 
  anything that can be seen or is hidden to the human eye. Chemistry first examines 
  the smallest object that starts a matter. This is the role of the atom. Then 
  chemistry explores the interaction between two atoms and the involvements among 
  atoms. The study seeks to understand how an atom of a kind combines to another 
  atom of the same substance, or how an atom of one substance combines with one or 
  other atoms of other substances to produce a new substance. A combination of 
  atoms is also called a chemical bond. The resulting object is called a compound. 
  Of course, there are rules that govern everything.</p>

</body>
</html>

This would produce:

A Common Padding Style

If you want to control padding for all four sides of a box or element, instead of creating them one by one, CSS provides a common style for all sides. The style is named padding. It can take the same values as the individual padding specifications: a constant HTML-based number of a relative value. Here is an example:

p {
    padding:    1.50em;
    text-align: justify;
    font:       12pt Times New Roman, Garamond, serif;
}

This would produce:

A Common Padding Style