facebook google plus twitter
Webucator's Free Introduction to CSS Tutorial

Lesson: Borders, Margins, and Padding

Welcome to our free Introduction to CSS tutorial. This tutorial is based on Webucator's Introduction to CSS Training course.

In this lesson, you will work with borders, margins, and padding.

Lesson Goals

  • Understand and use the CSS basic box model.
  • Understand and work with the padding property.
  • Understand and work with the margin property.
  • Understand and use border properties.
  • Understand and work with the box-sizing property.
  • Understand and work with the box-shadow property.

The CSS Basic Box Model

Every element in CSS can be thought of as a box made up of four parts, or areas:

  1. The content area contains the actual content of the element box (e.g., text, an image, a video, etc.).
  2. The padding area extends the content area to include padding inside the element box.
  3. The border area extends the padding area to include a border around the element box.
  4. The margin area extends the border area to include a margin outside the element box.

Box Model Diagram

Throughout this lesson, we will be learning how to size and style these areas.

Introduction to using Google Chrome DevTools with CSS

Most modern browsers provide built-in development tools. We will be looking at how the Elements panel in Google Chrome DevTools (https://developers.google.com/web/tools/chrome-devtools/css/) can be used with CSS.

The Elements panel of Chrome DevTools can be opened using the following methods:

  1. Right-click on the page and select Inspect:Chrome Inspect
  2. Control + Shift + C for Windows, or
  3. Command + Option + C for Mac.

See the image below of DevTools in action: Chrome DevTools Demo

This file is BordersMarginAndPadding/Demos/dev-tools.html.

Some things to note:

  1. DevTools show the entire HTML tree.
  2. Going through this tree and selecting the different elements will show the CSS rules that affect those elements, including rules that are default values coming from the browser.
  3. DevTools will show the calculated values for width, height, margin, border, and padding in the element's box model diagram.
  4. DevTools allows you to edit CSS properties in the browser by checking and unchecking existing properties (see the unchecked border property) or by creating new rules and properties (see the #inner p rule. These are created with the + sign in the upper right corner). Chrome DevTools Edits Demo

Padding

The padding shorthand property is used to size an element's padding area. padding takes either length values specified in units (e.g., em, rem, px, etc.), or percentage values relative to the width of the containing element. All values must be positive.

  1. When one value is specified, it applies to all four sides of the element.
  2. When two values are specified, the first value specifies the padding for the top and bottom and the second value specifies the padding for the left and right.
  3. When three values are specified, the first value is for the top, the second for the left and right, and the third for the bottom.
  4. When four values are specified, the values specify padding in a clockwise direction starting with the top (top, right, bottom, left).
  5. Alternatively, padding can be applied with the padding-top, padding-right, padding-bottom, and padding-left properties.

Code Sample:

BordersMarginsAndPadding/Demos/padding-styles.css
.border {
  border: 1px solid black;
}

#div1 {
  padding: 1em;
}

#div2 {
  padding: 1em 2em;
}

#div3 {
  padding: 1em 2em 3em;
}

#div4 {
  padding: 1em 2em 3em 4em;
}

#div5 {
  padding-top: 1em;
  padding-right: 2em;
  padding-bottom: 3em;
  padding-left: 4em;
}

Code Sample:

BordersMarginsAndPadding/Demos/padding.html
---- C O D E   O M I T T E D ----
<body class="webucator">
  <h1>padding</h1>
  <div id="div1" class="border">
    padding: 1em;
  </div>
  <hr>
  <div id="div2" class="border">
    padding: 1em 2em;
  </div>
  <hr>
  <div id="div3" class="border">
    padding: 1em 2em 3em;
  </div>
  <hr>
  <div id="div4" class="border">
    padding: 1em 2em 3em 4em;
  </div>
  <hr>
  <div id="div5" class="border">
    padding-top: 1em;
    padding-right: 2em;
    padding-bottom: 3em;
    padding-left: 4em;
  </div>
</body>
</html>

Code Explanation

The code above will render the following:padding Demo

We have included a border class to add a simple 1px black border around each div block so that the padding is visible. We will cover borders soon.

Margin

The margin shorthand property is used to size an element's margin area. Just like padding, margin takes either length values specified in units (e.g., em, rem, px, etc.), or percentage values relative to the width of the containing element. Negative values bring an element closer to its neighbors and can cause elements to overlap. The same shorthand specification rules that apply to padding also apply to margin:

  1. When one value is specified, it applies the same margin to all four sides of the element.
  2. When two values are specified, the first value specifies the margin for the top and bottom and the second value specifies the margin for the left and right.
  3. When three values are specified, the first value is for the top, the second for the left and right, and the third for the bottom.
  4. When four values are specified, the values specify margin in a clockwise direction starting with the top (top, right, bottom, left).
  5. Alternatively, margin can be applied with the margin-top, margin-right, margin-bottom, and margin-left properties.

Code Sample:

BordersMarginsAndPadding/Demos/margin-styles.css
.border {
  border: 1px solid black;
}

#div1 {
  margin: 1em;
}

#div2 {
  margin: 1em 2em;
}

#div3 {
  margin: 1em 2em 3em;
}

#div4 {
  margin: 1em 2em 3em 4em;
}

#div5 {
  margin-top: 1em;
  margin-right: 2em;
  margin-bottom: 3em;
  margin-left: 4em;
}

Code Explanation

Code Sample:

BordersMarginsAndPadding/Demos/margin.html
---- C O D E   O M I T T E D ----
<body class="webucator">
  <h1>margin</h1>
  <div id="container" class="border">
    <div id="div1" class="border">
      margin: 1em;
    </div>
    <hr>
    <div id="div2" class="border">
      margin: 1em 2em;
    </div>
    <hr>
    <div id="div3" class="border">
      margin: 1em 2em 3em;
    </div>
    <hr>
    <div id="div4" class="border">
      margin: 1em 2em 3em 4em;
    </div>
    <hr>
    <div id="div5" class="border">
      margin-top: 1em;
      margin-right: 2em;
      margin-bottom: 3em;
      margin-left: 4em;
    </div>
  </div>
</body>
</html>

Code Explanation

The code above will render the following:margin Demo

Border

The border shorthand property is used to size and add basic styles to all four sides of an element's border area. border can take up to three of the values listed below in any order:

  • border-width - Specifies the thickness of the border in units (em, rem, px, etc.) or as a keywords (thin, medium, thick). The default is medium.
  • border-style - Specifies the line style of the border as a keyword (none, solid, dotted, double, etc.). The default is none. For a full list of line style keywords, see Mozilla's border-style values list (https://developer.mozilla.org/en-US/docs/Web/CSS/border-style#Values).
  • border-color - Specifies the color of the border as a color value. The default is the current value specified by the color property.

Shorthand Defaults

As with any shorthand property, any unspecified values will be set to their default values.

The outline Property

The outline (https://developer.mozilla.org/en-US/docs/Web/CSS/outline) shorthand property works exactly like the border shorthand property. However, while a border takes up space and is part of the box model, an outline does note take up space and is not part of the box model.

Code Sample:

BordersMarginsAndPadding/Demos/border-styles.css
.padding {
  padding: 1rem;
}

#div1 {
  border: 1px solid red;
}

#div2 {
  border: green dotted;
}

#div3 {
  border: 0.3rem blue;
}

#div4 {
  border-top: 1px solid red;
  border-right: green dotted;
  border-bottom: 0.3rem dashed purple;
  border-left: 1rem blue double;
}

We have included a padding class to add a little padding in each div block to push the border away from the content.

Code Sample:

BordersMarginsAndPadding/Demos/border.html
---- C O D E   O M I T T E D ----
<body class="webucator">
  <h1>border</h1>
  <div id="div1" class="padding">
    border: 1px solid red;
  </div>
  <hr>
  <div id="div2" class="padding">
    border: green dotted;
  </div>
  <hr>
  <div id="div3" class="padding">
    border: 0.3rem blue;
  </div>
  <div id="div4" class="padding">
    border-top: 1px solid red;
    border-right: green dotted;
    border-bottom: 0.3rem dashed purple;
    border-left: 1rem blue double;
</body>
</html>

Code Explanation

The code above will render the following: border Demo

The div with the border: 0.3rem blue style does not render because no border-style was specified and the default border-style is none.

border-width

The border-width shorthand property is used to define the widths of the top, right, bottom, and left borders of an element. It takes either a border thickness in units (em, rem, px, etc.) or a keyword (thin, medium, thick). You specify individual border widths in the same way we have seen with the previous properties:

  1. When one value is specified, it applies the same border width to all four sides of the element.
  2. When two values are specified, the first value specifies the border width for the top and bottom and the second value specifies the border width for the left and right.
  3. When three values are specified, the first value is for the top, the second for the left and right, and the third for the bottom.
  4. When four values are specified, the values specify border width in a clockwise direction starting with the top (top, right, bottom, left).
  5. Alternatively, border width can be applied with the border-top-width, border-right-width, border-bottom-width, and border-left-width properties.

Code Sample:

BordersMarginsAndPadding/Demos/border-width-styles.css
/* The "box" class is used for display purposes only */
.box {
  border-style: solid;
  margin: 1rem;
  padding: 1rem;
}

#div1 {
  border-width: 1em;
}

#div2 {
  border-width: 1em 1.5em;
}

#div3 {
  border-width: 1em 1.5em 2em;
}

#div4 {
  border-width: 1em 1.5em 2em 2.5em;
}

#div5 {
  border-top-width: 1em;
  border-right-width: 1.5em;
  border-bottom-width: 2em;
  border-left-width: 2.5em;
}

Code Sample:

BordersMarginsAndPadding/Demos/border-width.html
---- C O D E   O M I T T E D ----
<body class="webucator">
  <h1>border-width</h1>
  <div id="div1" class="box">
    border-width: 1em;
  </div>
  <div id="div2" class="box">
    border-width: 1em 1.5em; 
  </div>
  <div id="div3" class="box">
    border-width: 1em 1.5em 2em;
  </div>
  <div id="div4" class="box">
    border-width: 1em 1.5em 2em 2.5em;
  </div>
  <div id="div5" class="box">
    border-top-width: 1em;
    border-right-width: 1.5em;
    border-bottom-width: 2em;
    border-left-width: 2.5em;
  </div>
</body>
</html>

Code Explanation

The code above will render the following:border-width Demo

No border when border-style is none.

Even with a border-width, an element will not show a border unless a border-style is specified.

Notice the box class that we included to add a border-style of solid and a margin and padding of 1rem each.

border-style

The border-style shorthand property is used to define the styles of the top, right, bottom, and left borders of an element. Possible values are listed below:

  1. dashed
  2. dotted
  3. double
  4. groove
  5. hidden
  6. inset
  7. none
  8. outset
  9. ridge
  10. solid

To apply different styles to individual sides, border-style works like the other properties we have seen:

  1. When one value is specified, it applies the same border style to all four sides of the element.
  2. When two values are specified, the first value specifies the border style for the top and bottom and the second value specifies the border style for the left and right.
  3. When three values are specified, the first value is for the top, the second for the left and right, and the third for the bottom.
  4. When four values are specified, the values specify border style in a clockwise direction starting with the top (top, right, bottom, left).
  5. Alternatively, border style can be applied with the border-top-style, border-right-style, border-bottom-style, and border-left-style properties.

Code Sample:

BordersMarginsAndPadding/Demos/border-style-styles.css
/* The "box" class is used for display purposes only */
.box {
  border-width: 0.5rem;
  margin: 1rem;
  padding: 1rem;
}

#dashed {
  border-style: dashed;
}

#dotted-double {
  border-style: dotted double;
}

#groove-hidden-inset {
  border-style: groove hidden inset;
}

#none-outset-ridge-solid {
  border-style: none outset ridge solid;
}

#longhand {
  border-top-style: double;
  border-right-style: groove;
  border-bottom-style: dashed;
  border-left-style: dotted;
}

Code Sample:

BordersMarginsAndPadding/Demos/border-style.html
---- C O D E   O M I T T E D ----
<body class="webucator">
  <h1>border-style</h1>
  <div id="dashed" class="box">
    border-style: dashed;
  </div>
  <div id="dotted-double" class="box">
    border-style: dotted double;
  </div>
  <div id="groove-hidden-inset" class="box">
    border-style: groove hidden inset;
  </div>
  <div id="none-outset-ridge-solid" class="box">
    border-style: none outset ridge solid;
  </div>
  <div id="longhand" class="box">
    border-top-style: double;
    border-right-style: groove;
    border-bottom-style: dashed;
    border-left-style: dotted;
  </div>
</body>
</html>

Code Explanation

The code above will render the following:border-style Demo

border-color

The border-color shorthand property is used to define the color of the top, right, bottom, and left borders. It can take up to four color values.

To apply different border colors to individual sides, border-color works like the other properties we have seen:

  1. When one value is specified, it applies the same border color to all four sides of the element.
  2. When two values are specified, the first value specifies the border color for the top and bottom and the second value specifies the border color for the left and right.
  3. When three values are specified, the first value is for the top, the second for the left and right, and the third for the bottom.
  4. When four values are specified, the values specify border color in a clockwise direction starting with the top (top, right, bottom, left).
  5. Alternatively, border color can be applied with the border-top-color, border-right-color, border-bottom-color, and border-left-color properties.

Code Sample:

BordersMarginsAndPadding/Demos/border-color-styles.css
/* The "box" class is used for display purposes only */
.box {
  border-style: solid;
  border-width: 0.5rem;
  margin: 1rem;
  padding: 1rem;
}

#red {
  border-color: red;
}

#red-blue {
  border-color: red blue;
}

#red-blue-green {
  border-color: red blue green;
}

#red-blue-green-purple {
  border-color: red blue green purple;
}

#longhand {
  border-top-color: red;
  border-right-color: blue;
  border-bottom-color: green;
  border-left-color: purple;
}

Code Sample:

BordersMarginsAndPadding/Demos/border-color.html
---- C O D E   O M I T T E D ----
<body class="webucator">
  <h1>border-color</h1>
  <div id="red" class="box">
    border-color: red;
  </div>
  <div id="red-blue" class="box">
    border-color: red blue;
  </div>
  <div id="red-blue-green-purple" class="box">
    border-color: red blue green;
  </div>
  <div id="red-blue-green-purple" class="box">
    border-color: red blue green purple;
  </div>
  <div id="longhand" class="box">
    border-top-color: red;
    border-right-color: blue;
    border-bottom-color: green;
    border-left-color: purple;
  </div>
</body>
</html>

Code Explanation

The code above will render the following:border-color Demo

border-radius

The border-radius property offers an easy method for adding rounded corners to elements. Each corner can take either one (for circular corners) or two (for elliptical corners) radii value specified as either a length value in units (em, rem, px, etc.) or as a percentage of the width (horizontal) or height (vertical) of the box.

  1. To specify one radius value for each corner, border-radius works similarly to other properties we have looked at:
    1. When one value is specified, it applies the border radius to all four corners of the element.
    2. When two values are specified, the first value specifies the border radius for the top-left corner and the bottom-right and the second value specifies the border radius for the top-right corner and the bottom-left corner.
    3. When three values are specified, the first value is for the top-left, the second for the top-right and bottom-left, and the third for the bottom-right.
    4. When four values are specified, the values specify border radius in a clockwise direction starting with the top-left (top-left, top-right, bottom-right, bottom-left).
  2. To specify two radii values for each corner, the second radii are separated from the first radii by a forward slash (/), and they are applied to each corner in the same manner that the first radii are applied. For example, 1rem 2rem 3rem / 0.5rem 1.5rem would apply 1rem and 0.5rem radii to the top-left corner, 2rem and 1.5rem radii to the top-right and bottom-left corners, and 3rem and 0.5rem radii to the bottom-right corner.

Code Sample:

BordersMarginsAndPadding/Demos/border-radius-styles.css
.border {
  border-style: solid;
  padding: 1rem;
}

#div1 {
  border-radius: 1rem;
}

#div2 {
  border-radius: 1rem 2rem;
}

#div3 {
  border-radius: 1rem 2rem / 0.5rem;
}

#div4 {
  border-radius: 1rem 2rem 3rem / 0.5rem 1.5rem;
}

#div5 {
  border-radius: 1rem 2rem 3rem 4rem / 0.5rem 1.5rem 2.5rem 3.5rem;
}

Code Sample:

BordersMarginsAndPadding/Demos/border-radius.html
---- C O D E   O M I T T E D ----
<body class="webucator">
  <h1>border-radius</h1>
  <div id="div1" class="border">
    1rem radii for all four corners
  </div>
  <hr>
  <div id="div2" class="border">
    1rem radii for top-left and bottom-right corners,
    2rem radii for top-right and bottom-left corners
  </div>
  <hr>
  <div id="div3" class="border">
    1rem and 0.5rem radii for top-left and bottom-right corners, 
    2rem and 0.5rem radii for top-right and bttom left corners
  </div>
  <hr>
  <div id="div4" class="border">
    1rem and 0.5rem radii for top-left corner, 
    2rem and 1.5rem radii for top-right and bottom-left corners,
    3rem and 0.5rem radii for bottom-right corner; 
  </div>
  <hr>
  <div id="div5" class="border">
    1rem and 0.5rem radii for top-left corner, 
    2rem and 1.5rem radii for top-right corner,
    3rem and 2.5rem radii for bottom-right corner, 
    4rem and 3.5rem radii for bottom-left corner; 
  </div>
</body>
</html>

Code Explanation

The code above will render the following:border-radius Demo

box-sizing

The box-sizing property defines how the height and width properties work to define the total dimensions of your box. box-sizing accepts two values:

  1. content-box - the default. When content-box is specified, width and height refer to the size of the content and do not include padding, border, or margin.
  2. border-box - When border-box is specified, the width and height include content, padding, and border, but do not include margin.

When trying to fit one block element inside of another, it is often best to set box-sizing to border-box as the following demo illustrates:

Code Sample:

BordersMarginsAndPadding/Demos/box-sizing-styles.css
.parent {
  background-color: lightyellow;
  border: 1px solid black;
  height: 300px;
  width: 300px;
}

#parent1 {
  margin-bottom: 60px;
}

/* The "box" class is used for display purposes only */
.box {
  height: 280px;
  width: 280px;
  padding: 10px;
  border: 10px solid red;
  margin: 10px;
  white-space: pre;
}

#content-box {
  box-sizing: content-box;
}

#border-box {
  box-sizing: border-box;
}

Code Sample:

BordersMarginsAndPadding/Demos/box-sizing.html
---- C O D E   O M I T T E D ----
<body class="webucator">
<h1>box-sizing</h1>
<div id="parent1" class="parent">
  <div id="content-box" class="box">
    <strong>content-box</strong>
    Content box height: 280px
    Total height: 320px
     = 280px + (2 * 10px) + (2 * 10px)

    Content box width: 280px
    Total width: 320px 
     = 280px + (2 * 10px) + (2 * 10px)
  </div>
</div>
<div class="parent">
  <div id="border-box" class="box">
    <strong>border-box</strong>
    Total height: 280px
    Content box height: 240px
     = 280px - (2 * 10px) - (2 * 10px)

    Total width: 280px
    Content box width: 240px
     = 280px - (2 * 10px) - (2 * 10px)
  </div>
</div>
</body>
</html>

Code Explanation

The code above will render the following:box-sizing Demo

Things to note:

  1. The containing parent boxes are both 300px by 300px.
  2. The children boxes are both set to 280px by 280px.
  3. The border and padding of the first child box, which has box-sizing set to content-box, are added to the sizes, extending the box past the borders of the parent box.
  4. The border and padding of the second child box, which has box-sizing set to border-box, are not added to the sizes, so the box stays within the parent box.

min-height, min-width, max-height, max-width

In addition to the height and width properties, there are also min-height, min-width, max-width, and max-height properties. These properties work exactly like height and width, except that they specify minimums and maximums. This means that if the window size increases, the box can expand up to its maximum values, and if the window shrinks, the box won't shrink more than its minimum values. Using these properties instead of height and width allows for more responsive designs.

box-shadow

The box-shadow adds a shadow to an element in the same way that text-shadow adds a shadow to text. It can take a comma-delimited list of shadows, each described by a combination of x and y offsets, blur radius, spread radius, and color. There is also an optional inset value. The values are explained below:

  1. x-offset and y-offset: required length values.
    1. x-offset must come immediately before y-offset.
    2. x-offset specifies the horizontal displacement (positive values to the right and negative values to the left).
    3. y-offset specifies the vertical displacement (positive values below and negative values above).
    4. If both values are zero, the shadow will be directly behind the box.
  2. blur-radius: an optional length value that specifies the size of the blur effect.
    1. If included, this value must come after the two offset values.
  3. spread-radius: an optional length value that determines the size of the shadow.
    1. Positive values will make the shadow grow.
    2. Negative values will make the shadow shrink.
    3. 0 (the default) means it will be the same size as the box.
  4. color: optional color value.
    1. If included, must be placed either immediately before or after the length values.
    2. If not included, the browser picks the color, so for consistency across browsers, it is a good idea to specify the shadow's color.
  5. inset: an optional keyword value that, when included, makes the shadow appear inside instead of outside of the box.
    1. If included, must be placed either immediately before or after the length values.

Code Sample:

BordersMarginsAndPadding/Demos/box-shadow-styles.css
/* The "box" class is used for display purposes only */
.box {
  background-color: lightblue;
  border: 1px solid black;
  float: left; /* allows boxes to be side by side */
  height: 100px;
  margin: 15px; 
  padding: 15px;
  text-align: center;
  width: 200px;
}

#div1 {
  box-shadow: .5rem .5rem gray;
}

#div2 {
  box-shadow: .5rem .5rem 1rem gray;
}

#div3 {
  box-shadow: .5rem .5rem 1rem .25rem gray;
}

#div4 {
  box-shadow: inset -.5rem -.5rem 1.5rem .25rem gray;
}

Code Sample:

BordersMarginsAndPadding/Demos/box-shadow.html
---- C O D E   O M I T T E D ----
<body class="webucator">
  <h1>box-shadow</h1>
  <div id="div1" class="box">
    box-shadow: .5rem .5rem gray;
  </div>
  <div id="div2" class="box">
    box-shadow: .5rem .5rem 1rem gray;
  </div>
  <div id="div3" class="box">
    box-shadow: .5rem .5rem 1rem .25rem gray;
  </div>
  <div id="div4" class="box">
    box-shadow: inset -.5rem -.5rem 1.5rem .25rem gray;
  </div>
</body>
</html>

Code Explanation

The code above will render the following:box-shadow Demo

See Mozilla's Box-shadow generator (https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Background_and_Borders/Box-shadow_generator) for a great tool to help design box shadows.

Borders, Margin, and Padding

Duration: 25 to 40 minutes.

In this exercise, you will continue to work on the Runners Home page.

  1. Open BordersMarginAndPadding/Exercises/index.html in your editor. You will see the homepage for a website called Runners Home.
  2. Open BordersMarginAndPadding/Exercises/styles.css. This is the stylesheet from the solution to the Text exercise. Feel free to continue working from your own stylesheet.
  3. Using your new knowledge of borders, margin, and padding, add some styles to this page. The object of this exercise is to practice using the properties you just learned about. Also, feel free to add or change any other properties that you know.
  4. When you are done, open index.html in your browser to see the results. You are welcome to go back to the code and continue to work.

You can design it however you like, or you can try to make it look something like:Borders Margins Padding Solution

Solution:

BordersMarginsAndPadding/Solutions/styles.css
html {
  font-size: 16px;
}

body {
  font: 1rem/1.3 Verdana, Geneva, Tahoma, sans-serif;
}

nav {
  border: solid rgb(110, 78, 226) 0.1rem;
  border-radius: 1rem;
  box-shadow: 0.2rem 0.2rem 1rem rgb(110, 78, 226, .5);
  margin: 1rem;
  width: 40%;
}

nav a {
  text-decoration: none;
}

main {
  padding: 2%;
  max-width: 1000px;
  min-width: 750px;
}

#welcome {
  font-size: larger;
}

#welcome h1 {
  color: rgb(8, 5, 211);
  text-shadow: 0.2rem 0.2rem 0.1rem rgb(211, 200, 238);
}

article {
  border: 1px ridge rgb(226, 77, 40);
  box-sizing: border-box;
  margin: 1em auto;
  padding: 1rem;
  max-width: 75%;
  text-align: center;
}

article h2 {
  font-variant: small-caps;
  letter-spacing: 0.1em;
  word-spacing: 0.2em;
}

article p {
  line-height: 2;
  text-align: left;
  text-indent: 3rem;
}

.read-more {
  text-decoration: none;
}

aside label {
  font-weight: bold;
}

#newsletter {
  border: 1px dashed rgb(110, 78, 226);
  border-radius: 1em;
  margin: 0 1rem;
  padding: .5rem 1rem;
  text-align: right;
}

footer {
  font-size: smaller;
  font-style: italic;
  margin: 1rem;
}