Tag: margins

CSS Lesson 5: Webpage Margins and Padding

Hello everybody,

Michael here, and today’s post will discuss how to incorporate CSS margins and padding into your webpage.

What do margins and padding do, exactly? Well, in the context of CSS development, margins are used to create space around webpage elements outside of predefined borders. In other words, if there are some elements that you’d like to surround with some whitespace, using a margin would be perfect.

Let’s explore how margins work by first taking a look at the HTML form code we’ve used for every CSS lesson in this series thus far (the CSS stylings not including the borders from the previous lesson will remain intact here):

<!DOCTYPE html>
<html lang="es-US" dir="ltr">
  <head>
    <meta charset="utf-8">
    <link rel="stylesheet" href="Form.css">
    <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Press+Start+2P">
    <title></title>
  </head>
  <body>
    <h1>Flight finder:</h1>
    <form action="Submitted.html" method="POST">
      <label for="datepicker1">Pick the date you want to depart for your vacation</label><br>
      <input type="date" id="datepicker1" name="datepicker1" min="2021-03-25" max="2022-03-25"><br>
      <br>
      <label for="datepicker2">Pick the date you want to return from your vacation</label><br>
      <input type="date" id="datepicker2" name="datepicker2" min="2021-03-25" max="2022-03-25"><br>
      <br>
      <label for="time1">What time would you like to depart? (flights shown within 90 minutes of selected time)</label><br>
      <input type="time" id="time1" name="time1"><br>
      <br>
      <label for="time2">What time would you like to return? (flights shown within 90 minutes of selected time)</label><br>
      <input type="time" id="time2" name="time2"><br>
      <br>
      <label for="layover">How many layovers do you want?</label><br>
      <input type="number" id="layover" name="layover" min="0" max="3"><br>
      <br>
      <input type="submit" value="Submit">
    </form>
    <div class="container">
     <p>Thank you for booking your next trip with XYZ Airlines!!</p>
     <p>Can't wait to see you on your travels!!</p>
   </div>
  </body>
</html>

Great. Now let’s say we wanted to add a little margin to the Flight finder: header. Take a look at the highlighted line of CSS code to see how you can accomplish this:

h1{
  color: green;
  font-family: "Comic Sans MS";
  font-size: 40px;
  text-align: center;
  margin: 30px;
}

.container{
  color: red;
  font-family: "Press Start 2P";
  font-size: 30px;
  text-align: center;
}

input{
  background-color: #00FFFF
}

To add a margin to the Flight finder: header, I added a styling call to the h1 declaration that uses the margin property and sets the value to 30px-this adds a 30px margin around all sides of the Flight finder: header.

Look, I know margins aren’t as obvious to detect as borders but trust me, they’re there. If it helps, think of margins as a sort of invisible border around a certain HTML element(s).

  • Margins are always measured in px (pixels). Always append the px suffix to whatever you want to use for the margin measurement.
  • Also, even though I mentioned that you could think of margins as “invisible borders”, you can’t set colors or line styles for margins (after all, margins are invisible, so therefore you won’t even see any colors/line styles). However, margins, like borders, have four sides-you can have four different margin sizes if you so choose (just like you can have four different border line stylings). More on this point later.

So, know how I mentioned that similar to how you can have up to four different border line stylings, you can also have up to four different margin sizes. Let’s see an example of this in the highlighted line of CSS code below:

h1{
  color: green;
  font-family: "Comic Sans MS";
  font-size: 40px;
  text-align: center;
  margin: 30px 10px 20px 40px;
}

.container{
  color: red;
  font-family: "Press Start 2P";
  font-size: 30px;
  text-align: center;
}

input{
  background-color: #00FFFF
}

In this example, I used four different margin lengths-30px 10px 20px 40px-to denote the four different margin sizes I’d like to use. Notice anything familiar about the highlighted styling call? The way I listed the margin lengths is the same way I used to list different border stylings in the previous lesson (CSS Lesson 4: Webpage Borders)

Just to reiterate the logic I used in the previous post (but in the context of margins):

  • If margin has four values:
    • Example: margin: 10px 50px 20px 40px
    • How it would work: top margin of 10px, right margin of 50px, bottom margin of 20px, left margin of 40px
  • If margin has three values:
    • Example: margin: 10px 50px 20px
    • How it would work: top margin 10px, right and left margins 50px, bottom margin 75px
  • If margin has two values:
    • Example: margin: 10px 50px
    • How it would work: top and bottom margins 10px, right and left margins 50px
  • If margin has one value:
    • Example: margin: 10px
    • How it would work: all margins 10px
  • Ideally, try to maintain even margins for your elements. Having all margins the same length is fantastic, but the 2-2 rule (which I made up) works just as well-top and bottom margins set to the same length, and left and right margins set to the same length but different than the length of the top and bottom margins.
  • If you want to set margin lengths for each side of a margin around an element, using the margin-top, margin-bottom, margin-left and margin-right properties would work too; however, this is less efficient than utilzing the multiple margin lengths logic I discussed above.

Sounds pretty easy, right? However, keep in mind that there’s another possible value for margins-auto. Using the auto value on an element will horizontally center it. Take a look at how it’s used (through the highlighted line of code):

h1{
  color: green;
  font-family: "Comic Sans MS";
  font-size: 40px;
  text-align: center;
  margin: auto;
}

.container{
  color: red;
  font-family: "Press Start 2P";
  font-size: 30px;
  text-align: center;
}

input{
  background-color: #00FFFF
}

In this example, I set the value of the h1 element’s margins property to auto, which automatically horizonatally centers the h1 element in the webpage.

  • Personally, if you want the webpage looking as neat as possible, auto would be the way to go when working with your margins. Also, unlike with prespecified margin lengths (e.g. 10px, 50px), you can’t repeat auto several times. So a styling call like margins: auto auto auto auto won’t work.

Now that we’ve explored margins, let’s take a look at padding. Padding and margins are conceptually similar since both features are meant to create space around an element (or elements) in your webpage. However, margins create space around an element outside of a defined border, while padding creates space around an element INSIDE of a defined border. Let’s take a look at a basic example of padding (using the highlighted line of code below):

h1{
  color: green;
  font-family: "Comic Sans MS";
  font-size: 40px;
  text-align: center;
  margin: auto;
}

.container{
  color: red;
  font-family: "Press Start 2P";
  font-size: 30px;
  text-align: center;
  border-style: solid;
  border-color: green;
  border-width: 6px;
  padding: 30px
}

input{
  background-color: #00FFFF
}

In this example, I applied a padding of 30px (like margins, padding values are also specified in px or pixels) to the elements in the .container class-the last two lines of text on the webpage. This creates whitespace of 30px between the elements and each side of the border.

Now, can you specify multiple padding lengths similar to how you can specify multiple border stylings or margin lengths? Yes. Does the logic for specifying mutliple padding lengths work the same as it would for specifying multiple border stylings or margin lengths? Also yes. Let me explain below:

  • If padding has four values:
    • Example: padding: 25px 30px 10px 50px
    • How it would work: top padding 25px, right padding 50px, bottom padding 10px, left padding 50px
  • If padding has three values:
    • Example: padding: 25px 30px 10px
    • How it would work: top padding 25px, right and left paddings 30px, bottom padding 10px
  • If padding has two values:
    • Example: padding: 25px 30px
    • How it would work: top and bottom paddings 25px, right and left paddings 30px
  • If padding has one value:
    • Example: padding: 25px
    • How it would work: all paddings 25px

While discussing CSS margins, I did mention another approach to setting multiple margin lengths-using the margin-top, margin-left, margin-bottom, and margin-right properties to set the top, left, bottom, and right margin lengths, respectively. You can do something similar with padding lengths using the padding-top, padding-left, padding-bottom, and padding-right properties, respectively, but it would be much more efficient to use the multiple-padding-lengths-in-a-single-line approach that I discussed above.

  • Just like with margin lengths, I don’t recommend setting four (or even three) different padding lengths, as this would make the element spacing look really uneven. One or two padding lengths would work just fine (preferably a single padding length).
    • You may be able to hide uneven margin lengths better than you can hide uneven padding lengths, as margins are utilized outside of defined borders while padding is utilized inside of defined borders. Therefore, uneven padding is more obvious to see to visitors of your website.
  • Lo and behold, you can utilize the auto property on padding too in order to horizontally center your element withing a border. Same rules from applying the auto property to margins are in place here (e.g. the styling call padding: auto auto auto auto) won’t work. Here’s how utilizing the auto property for padding would work here (pay attention to the highlighted line of code):
h1{
  color: green;
  font-family: "Comic Sans MS";
  font-size: 40px;
  text-align: center;
  margin: auto;
}

.container{
  color: red;
  font-family: "Press Start 2P";
  font-size: 30px;
  text-align: center;
  border-style: solid;
  border-color: green;
  border-width: 6px;
  padding: auto
}

input{
  background-color: #00FFFF
}

Thanks for reading,

Michael