by Jim Gordley

Margins and Padding

diagram showing the margin and padding areas of an HTML element. Every element in HTML creates a container that has a margin and padding to contain a background and a content area. The margin is the amount of space between the element and the content. The padding is the amount of space between the content and the margin.
The diagram an the right shows the margin (dark gray) and the padding (light gray) the text is the content. The diagram shows the content with a visible white background the actual content will have the same color as the padding.

Controlling Padding

Using the padding property and value in pixels in a style declaration is the best way to control an elements padding. The padding value will control the space between an elements content and the edges of its container. An Example:

div {padding:15px;}

Using the example above all <div> elements will have 15 pixels of padding on all four sides. A little space between the edge of the container and the content can make it easier to read. It is possible to control padding for all four edges of an element.

Property What It Controls
padding Controls all four sides of the element.
padding-top Controls the top padding
padding-right Controls the right padding
padding-bottom Controls the bottom padding
padding-left Controls the left padding

The four edges of the padding can be controlled independently from each other giving precise control in the way content is presented.

Negative Margins

We learned earlier how to control margins using only positive values. Negative values can also be used to tweak the position of content. To set a negative margin use the minus sign (-) in front of the value integer.

h3 {margin-top:-10px}

The CSS declaration above would move a level 3 heading upwards by 10 pixels. These little tweaks are most often used to compensate for the differences between browser parograms.

  1. On the task bar select the styles.css Notepad file.

  2. Add the highlighted code to the nav id

    #nav {background-clor:#FF9933;

    Save the changes.

  3. Refresh the browser page.

  4. On the task bar select the file.

    Add the highlighted code to the nav id

    #nav {background-clor:#FF9933;

    Save the changes.

  5. Refresh the browser page

  6. Close all open files.

To edit the styles.css file

Nudges the navigation bar upwards by 3 pixels.

Notice that now there is vertical white space between the navigation bar and the logo.
More editing.

Adds padding to the nav bar (more room around the text)

Unit Summary & Independent Practice Activity
Topic A You learned how to set page margins.
Topic B You learned how to create id selectors in CSS and apply styles using the id attribute in HTML. Using the id attribute with the <div> tag you learned how to define a content area.
Topic C You learned to create class selectors in CSS and apply styles using the class attribute.
Topic D You learned control the width of an element. You also learned the difference between inline and block elements.
Topic E You learned that margins can have a negative values. You also learned to control element padding and spacing.


Independent Practice Activity
  1. Open the practice.html and the practice.css files in Notepad.
  2. Insert a new <div> tag directly underneath the <hr> tag.
    (under the FOOTER comment) Close the </div> tag after the closing address tag.
  3. Place an id attribute with a value of footer in the <div> tag.

    <div id="footer">
  4. Switch to the practice.css file. Create an id selector (#footer) that adds an 18 pixel padding to the left side and a top margin of -5 pixels.
  5. Compare your results with the screen shot below.
  1. Close all open files.
Formatting Tables