Spacing and positioning are important factors of website design. Using CSS margin design is a powerful way to manipulate those concepts as it works with the area around your HTML elements.
In this short guide, you will learn how to use the CSS margin property to control element spacing as needed. Samples of code and output examples will be provided to help you along the way. If you need any refreshers on the basics of HTML or CSS, please take a look at HTML for Dummies and CSS Basics for Beginners to get caught up.
Setting the CSS Margin Sides
Controlling the spacing of an HTML element is easy to do with the CSS margin property. The spacing you will be working to manipulate are the margin sides of the element. Understanding the CSS box model is a great help for this concept. If you are not familiar with the model, please have a read on The CSS Box Model: Explained for Beginners for a quick run on the basics.
The CSS margin property can be called in two ways. The first is through the use of the individual sides of the element. The second is through the shorthand method which simplifies the former into one line of code instead of four separate ones.
With the first method, you will use the following CSS properties to alter the element margins.
- margin-right: Alter the element’s right margin side.
- margin-top: Alter the element’s top margin side.
- margin-left: Alter the element’s left margin side.
- margin-bottom: Alter the element’s bottom margin side.
Setting Up the Example
In the sample HTML code below, you can see a few paragraph elements placed in the document body. These will be the targets for the upcoming examples. Note the use of an id for the middle paragraph tag. This will help with the styled examples as well.
A CSS border property is also applied to the paragraph elements to help with the visual example as well.
Using the above HTML and CSS code provides the following render on the page.
Using the CSS Margin Properties
With the foundation code ready, you can move on to actually using the CSS margin properties. The paragraph tag in the middle with the blue border will be the focus of the examples. The first two properties to work with are the top and bottom.
In the CSS code below, you can see that the “margin-top” and “margin-bottom” CSS properties have been applied to the middle paragraph element with the id of “test”.
Using the new margin settings, the page will now render in the following manner.
Inspecting the page directly within Chrome or Firefox will also show you the highlighted margin effects as well.
Up next are the left and right margin properties. To give a better visual aid to this example, the paragraph elements are going to have their display set to inline-block. Doing so will place each of the paragraph tags on the same block level, yet still allow for width and height adjustments to take effect.
With the new display set in, the page now renders the elements together as shown below.
Using the left and right margin properties is done in the same way the top and bottom values were altered. In the CSS example below, the left and right margin have been set with a value of 70 pixels.
The browser will take the CSS margin value into account when rendering the HTML page providing the following render.
CSS Margin Property Value Options
It should be noted that you can use other values as well for the CSS margin properties, even negative ones. In the example below, note that a value of negative 30 was used for the left and right margin sets. It renders on the page as shown here.
That output is messy and hard to read. You might wonder why that even exists as an option, however consider the broader design concepts. It does not work for this example, but it is an option you have if you need it. CSS is all about flexibility and options. It’s great to have it in your toolbox just in case.
Another option is to use the percentage value. Using a percentage value will take the margin value as of the width of the containing element. Note that even a small percentage change can have a noticeable effect on the page output. In the sample CSS below, the percentage value of ten was used.
You also have the option to use the value of “auto” to allow the browser to provide the calculations for the element’s margin. You can see this in effect with the example shown below.
Using the CSS Margin Shorthand Property
The other method of calling the CSS margin property is simply using the shorthand method. This method allows you to set all the margin side values on one line. This is useful for keeping the CSS code clean and short. However, you do have to follow a rule of declaration for the shorthand values.
The declared value sets follow the direction set below.
Here is an example for the shorthand method syntax.
margin: topValue rightValue bottomValue leftValue;
margin: 40px 40px 40px 40px;
Notice that there are no commas, dashes, or semicolons in between the values. In the image below the shorthand method was used to add margin gains to the middle paragraph element.
With the browser inspection once again active, you can easily see how the CSS margin values are set in use on the page.
This short read has provided you with the basics for the CSS margin property and ways to use it for your own work. However, that’s just the tip of the CSS iceberg in terms of getting started. There is plenty of depth to explore once you jump into it.
Remember to keep trying new things and enjoy the process. Having fun with CSS design is a great way to hone your existing skills and strengthen new ones.
Why stop at just CSS margin work? Add in advanced programming skills to design your own future. The creativity of programming is allowing people to do even more with their ideas. If you want to advance your career, take the first steps by learning to code.
Having these skills can help you open doors to those new professional possibilities. Enroll in Udacity’s Intro to Programming Nanodegree today to start the journey.