Element Spacing and Alignment

Box Model

CSS treats each HTML element as if it lives in its own box. You can set several properties that affect the appearance and imensions of an element box.

The properties of the box we can control with CSS are element padding, borders, and margins for each box with CSS. Here is a breakdown of what each means:

1. Content - Is the main substance of your element, and lives in the center of the box. For example, your paragraph text.
2. Padding - Padding is the space between the content and border of a box. Adding padding increases the total size of an element and can increase the readability of its contents.

   Note: For our class site, I have used the padding property on all tables and navigation elements. This gives a little extra space, or breathing room between the data in my table cells/link text in my navigation, and the border that surrounds them. Here is how I have done that for my table heading and data elements:

   th, td{	
   	padding: 5px 20px 5px 20px;
   }
   

   5 pixels of padding have been added to the top and bottom, and 20 pixels of padding to the right and left. In order, the above numbers address the top, right, bottom, and left of the box or TRBL (Trouble) when written out like this. Although it takes a little longer, I could have also written my CSS like this:

   th, td{	
   	padding-top: 5px;
   	padding-right: 20px; 
   	padding-bottom:5px;
   	padding-left:20px;
   }
   

   If I wanted the padding on my element to be the same on all sides (for example 10px), I could write the following:

   th, td{	
   	padding: 10px;
   	
   }
   

3. Border - Every box has a border (even if it is not visible or is specified to be 0 pixels wide). The border can be used to form a visual outline of content, and separates the edge of one box from another. The border-style property can be set to solid, dotted, and double.

   Note: On our class site, I have given my table data and navigation links a border. This helps to distinguish important information visually. In order to add a border to my navigation (which is a list of links inside nav opening and closing tags), I gave each list item the class="main-nav", and because I wanted the same border on the top, right, bottom, and left of all the list items in my navigation elements, I wrote the following in my CSS:

   .main-nav li {
       border: 2px solid;
   }
   

4. Margin - Margins sit outside the edge of the border. You can set the width of a margin to create a gap between the borders of two adjacent boxes. Margins impact the spacing between elements.

   Note: For our class website, I have changed the default margin of all the elements in the body to 40px (I could have also set the margin to 2-3% for a similar effect). This creates a little extra whitespace at the top, right, bottom and left of our class content. Here is how I have done that:

   body{
   	margin:40px;	
   }
   

Text-Align

The text-align property is used to set the horizontal alignment of a text. All text can be left or right aligned, centered, or justified. By default our elements

Note: On our class site, I have updated just the heading level 1 (h1s) so that they are aligned center on the page. This alignment of main headings on each page, gives them visual prominence without breaking up the left to right reading flow of contents. Here is how I have done that:

h1{
	text-align:center;
}