CSS Padding
Home Learning Path LAMP HTML/CSS PHP MySQL JavaScript YouTube Blog PHP Fiddle

Intro to CSS: Padding

Quick Copy Boxes





Padding is the space surrounding an element's Content. Padding is spae inside the the container.

At the bottom of this page there is a code editor pre-loaded with the lesson's code.


Padding Syntax


 .withPad {
    padding-top: 5px;
    padding-right: 10px;
    padding-bottom: 15px;
    padding-left: 20px;
 }

➼ withPad - This is the class name.
➼ padding-top - There will be 5px of padding above the cotent.
➼ padding-right - There will be 10px of padding to the right of the cotent.
➼ padding-bottom - There will be 15px of padding below the cotent.
➼ padding-left - There will be 20px of padding to the left of the cotent.

HTML:


<div class = 'withPad'>
   The padding will be placed around the content.
</div>

Padding - Shorthand

You can write all padding in one line.


.shortPad{
   padding: 5px 10px 15px 20px;
}

➼ shortPad - This is the class name.
➼ 5px - padding-top
➼ 10px - padding-right
➼ 15px - padding-bottom
➼ 20px - padding-left

HTML:

<div class = 'shortPad'>
     The padding will be placed around the content.
  </div>

Example: Morning Beverages

☀ Morning Beverages ☀
  • ✶ Coffee ✶
  • ✶ Tea ✶
  • ✶ Red Bull ✶
  • ✶ Juice ✶
  • ✶ Milk ✶

Let's look at the CSS and HTML used to make the list above.
If you are not familar with the making lists, check out the lessons on HTML Lists and CSS Lists.

There are four CSS code blocks used to make the list. There will be a code block for each of the following:
✶Unordered list
✶List items
✶List heading
✶Heading.

Unordered List

First we will create a class for an unordered list.


ul.listClass{
  background: #FF3700;
  padding: 20px;
  border-style: solid;
  border-color: orange;
  list-style-type: none;
}

➼ ul - This class is for an unordred list.
➼ listClass - This is the name of our class.
➼ background - The background color of the ul element is #FF3700 (orangey color).
➼ padding - Each side of the element has 20px padding. (If there is only one number listed after 'padding', that number is applied to the padding on each side)
➼ border-style - A solid line is used for the element's border.
➼ border-color - It is orange.
➼ list-style-type - It is none, which means no bullet points.

List Items

Now, let's write our CSS for the individual list items.


ul.listClass li {
   background: #FFE53D;
   padding: 10px;
   border-style: solid;
   border-color: orange;
   border-width: 2px;
   color: #FF520D;
}

➼ ul.listClass - This code applies to something within the ul listClass.
➼ li - The code applies to list items (li) inside unordered lists with the class 'listClass'.
➼ background - The background-color is #FFE53D.
➼ padding - Each side of the list items will have 10px padding.
➼ border-style - It is a solid line.
➼ border-color - It is orange.
➼ border-width - It is 2px.
➼ color: - The text color is #FF520D

List Heading

Now, we will create the heading. I used a span element.


span.listClass {
   font-family: Helvetica, sans-serif;
   font-size: 24px;
   color: #FF520D;
   background: yellow;
   border-style: solid;
   border-width: 2px;
   border-color: orange;
   padding: 5px;
 }

➼ span.listClass - The class name is listClass and it is exclusive to span elements.
➼ font-family - Helvetica is the first choice, if that can't be displayed we will go with anything sans-serif.
➼ font-size - Its 24px.
➼ color - Text color is #FF520D.
➼ background - It is colored yellow.
➼ border-style - It is a solid line.
➼ border-width - The border line will have a width of 2px.
➼ border-color - It is orange.
➼ padding - Each side of the heading will have 5px padding.

Container

Now, we will style a div container. The list will be inside this div.


 div.listClass {
    text-align: center;
    background-color: black;
    padding: 25px;;
    font-weight: bold;
 }

➼ div.listClass - This code applies to divs with class listClass.
➼ text-align - The text will be centered.
➼ background-color - The background-color is black.
➼ padding - Each side of the list items will have 25px padding.
➼ font-weight - Text will be bold.

Finally, we will look at the HTML code for the list.


<div class = 'listClass'>
  <span class = 'listClass'>&#9728; Morning Beverages: &#9728;</span>
    <ul class = 'listClass'>
      <li>&sext; Coffee &sext;</li>
      <li>&sext; Tea &sext;</li>
      <li>&sext; Red Bull &sext;</li>
      <li>&sext; Juice &sext;</li>
      <li>&sext; Milk &sext;</li>
    </ul>
</div>

➼ Container
➼ Heading
➼ Unordered List
➼ List Items

Color Selector



Hex:


RBG:

Play with the code in the code editor below. Don't forget to check-out the CSS tab. Also, continue working on the ad you started in CSS Color lesson.