Placing Elements with Margin, Padding, and Absolute Positioning

September 1, 2021

A hallmark of a modern web pages and apps is that they have several elements on any given screen. These elements are spaced in differently. Sometimes there are smaller elements or boxes inside larger elements. On any phone’s home screen there is generally the time of day, weather, and other information that the user doesn’t need to unlock the phone to see. The placement and spacing around these elements is chosen to emphasize the most important things first (like the time of day). Form follows function. One of the best ways to emphasize certain elements is by placing a lot of white space around them. Let’s go over some properties of the CSS Box Model that help determine this white space.

CSS Box Model with margin, padding, and border Image source

Margin and its effects on placing an element

Margin moves HTML elements by adding more white space outside the element. The property margin-left: 20px will add 20 pixels of whites space to the left of the element, moving it to the right. This is an important effect of using margin and padding is that they work on white space, unlike absolute positioning. The four directions of an element it’s possible to add white space is top, right, bottom, and left (TRBL). If you don’t remember these, you might find yourself in a lot of trouble.

For example, rather than adding four separate properties to a CSS class, one can just add the margin property followed by four values. Example:

.container {
    margin: 20px 4px 50px 4px;
}

Going from left to right this adds: 20px of space to the top, 4px to each side (right and left), and 50px of space to the bottom. In addition to spacing the element precisely, the margin property has one other useful quality; it helps center elements with its 0 auto value. Within your CSS file it’s often helpful to add a .centered class.

.centered {
    margin: 0 auto;
}

Padding elements with a space cushion

While margin adds white space outside the element, giving the illusion of movement, padding adds spacing inside the element, cushioning other elements inside it from appearing too overcrowded. This is a common technique in CSS; by adding properties to a parent HTML element, those properties affect their descendent elements. This is where the “Cascading” in Cascading StyleSheets comes from because a parent’s properties will cascade to affect their HTML descendents.

The best way to visualize padding is by having a parent element with several nested elements inside it, like so:

<div class="parent">
    <div class="child">el 1 content</div>
    <div class="child">el 2 content</div>
    <div class="child">el 3 content</div>
</div>

Let’s give these elements some width and height so that they are visible. Then we’ll add some padding to the .parent class.

.parent {
    border: 1px solid black;
    width: 100%;
    height: 5em;
}
.child {
    border: 1px solid blue;
    width: 30%;
    height: 30%;
}

When the HTML file is linked with its CSS and opened in a web page, it should look like this:

There are a few things to notice here:

Note that the elements stack. This is the default behavior of block level elements (like div) in HTML.
There is no spacing on the left or top of the div but there is some on the bottom, so elements stack from the top.
Padding is useful for adjusting spacing within an element whereas margin is useful for spacing between elements.

Let’s center these elements and stack them evenly on top of each other, similar to a pillar. Starting with the parent div, let’s add a bit of spacing to the top using padding. You can accomplish this by adding padding-top: 0.5em;. You might be wondering where the 0.5em comes from and why it works. It’s because that’s the spacing that’s left over after filling all the children (30% height × 3 = 90%). So the remaining height is 10% of 5em, or 0.5em. We’ll add the same padding to the left and right for symmetry. The CSS of the .parent class should be updated:

.parent {
    border: 1px solid black;
    width: 100%;
    height: 5em;
    padding-top: 0.5em;
    padding-left: 0.5em;
    padding-right: 0.5em;
}

Instead of repeating the padding property 3 times, though, it’s more concise to use the TRBL rule for writing out the padding on all sides.

.parent {
    border: 1px solid black;
    width: 100%;
    height: 5em;
    padding: 0.5em 0.5em 0em 0.5em;
}

With the added padding, the child elements have now been spaced out from the left and top.

Now all that’s left is to center the child elements with margin: 0 auto;. The .child class’s CSS should look like:

.child {
    border: 1px solid blue;
    width: 30%;
    height: 30%;
    margin: 0 auto;
}

Absolutely Positioning Elements

Sometimes you want an element that’s positioned not within any container, but within the screen itself at an exact place or coordinate. For example, think notifications or alerts. They always appear either at either the top of the screen or someplace on the bottom-right of the screen. By specifying exactly where an element appears, repeatedly, users get habituated to look at that place on their screen for any additional information. For elements that always need to be visible and placed in a specific location on the screen, CSS gives us two properties: z-index and position: absolute;.

Absolute positioning unlocks the top, right, bottom, and left properties of that element. It also allows the web app designer to position the element in 3D with the z-index property, which is a number. Elements with a greater z-index will appear stacked above elements with a lower z-index. When creating a custom notification bar, the element that will show the alert message should be positioned absolutely with a high z-index, like 10. Its background-color and text color can change depending on the type of notification and its urgency.

Below is an example of a notification style positioned on the bottom-right:

.alert {
    position: absolute; /* can also be 'fixed' */
    bottom: 16px; /* 16px of space from the bottom and right of screen */
    right: 16px;
    padding: 12px; /* 12px of padding for the message text */
    min-width: 100px; /* for shorter messages */
    max-width: 300px; /* for longer messages */
    min-height: 50px; /* ensure even shorter messages are visible */
}

For adjusting the severity and urgency of the message, a separate class can be added for each level of severity that just changes the background-color and color properties. The value of these colors will depend on the theme you have selected for your web app. By isolating theme elements into their own classes, you make most of your CSS reusable and transferrable to any other project or web app. Positioning elements just right is often a battle with more complex web apps, but margin and padding make up the foundations of adding spacing where you need it. Advanced positioning makes use of layout-related properties like display: flex; and display: grid;. These will be covered in a separate article on positioning.