The margin-top property sets the top margin of an element. This “element” can include an image, or any of the text on your web page. You can even apply margin-top to headings. Controlling spacing is vital to help assure your web page is easy to read and has the proper spacing around the elements.
For this beginner’s tutorial, you will learn some straightforward techniques to apply the margin-top property in effective and useful ways. The information within will combine CSS (Cascading Style Sheets) functions while creating the effect within the HTML (Hypertext Markup Language) page. Along the way, you will also be provided with some fun and creative design elements. All you need to start with is a simple code editor such as Notepad ++.
Starting a New HTML Page
Before you get started using the margin-top property, you need a fresh canvas to work with. In the following example code below, you can see a very basic HTML page set up for use. A single paragraph element has been added with a bit of internal CSS to provide it with some style definition. Note that we have added the CSS into the head of the HTML document and not in the body.
<!DOCTYPE html>
<html>
<head>
<style type=text/css>
p {
font-weight: normal;
font-size: 16px;
font-family: Arial, Helvetica, sans-serif;
}
</style>
<body><p>It officiendam eum id quuntis itibus ditatem fuga. Ad quamus, solectotam re corem facerspid que voleceaquas eaqui cum faciasperia volesed mollacias utatur, ipienem hitatus cilluptaquis renimpo reiciuntem restrum dic toria precuptatet </p><img src="wave1.jpg" alt="ocean wave"><p>Empel minctetum id quamus nonserit esto officia que con coreperspis doluptatur aut ius nonsequis as volorer ferum, volupta volorpo rrovita tendis quam et volorem porestia ape dolut et quature ptureici ipsamet voluptat ommolor suntius </p></body></html>Defining margin-top with a Percentage Value
Now add in some CSS to define the margin-top for the image that is set between the paragraphs. This will provide the spacing on top of the image. For this example, martin-top is being defined with a percent value.
<!DOCTYPE html>
<html>
<head>
<style type=text/css>
img {
margin-top: 3%;
width: 300px;
}
p {
font-weight: normal;
font-size: 16px;
font-family: Arial, Helvetica, sans-serif;
}
</style>
<body><p>It officiendam eum id quuntis itibus ditatem fuga. Ad quamus, solectotam re corem facerspid que voleceaquas eaqui cum faciasperia volesed mollacias utatur, ipienem hitatus cilluptaquis renimpo reiciuntem restrum dic toria precuptatet </p><img src="wave1.jpg" alt="ocean wave"><p>Empel minctetum id quamus nonserit esto officia que con coreperspis doluptatur aut ius nonsequis as volorer ferum, volupta volorpo rrovita tendis quam et volorem porestia ape dolut et quature ptureici ipsamet voluptat ommolor suntius </p></body></html>The result in a browser is as follows:
Defining margin-top with a em Value
Now add in some CSS with an em value. The em value is always in relationship with the font size around it, thus it will adjust accordingly to that font value.
<!DOCTYPE html>
<html>
<head>
<style type=text/css>
img {
margin-top: 2em;
width: 300px;
}
p {
font-weight: normal;
font-size: 16px;
font-family: Arial, Helvetica, sans-serif;
}
</style>
<body><p>It officiendam eum id quuntis itibus ditatem fuga. Ad quamus, solectotam re corem facerspid que voleceaquas eaqui cum faciasperia volesed mollacias utatur, ipienem hitatus cilluptaquis renimpo reiciuntem restrum dic toria precuptatet </p><img src="wave1.jpg" alt="ocean wave"><p>Empel minctetum id quamus nonserit esto officia que con coreperspis doluptatur aut ius nonsequis as volorer ferum, volupta volorpo rrovita tendis quam et volorem porestia ape dolut et quature ptureici ipsamet voluptat ommolor suntius </p></body></html>The result in a browser is as follows:
Set the Margin for All Four Sides
There are separate margin settings that allow you to control all four sides. These four margin settings are:
- margin-top
- margin-right
- margin-bottom
- margin-left
Although you can control each of these values individually, you can also set all four sides to one value by using the margin property. In this demonstration, the property value will be set in pixels.
<!DOCTYPE html>
<html>
<head>
<style type=text/css>
img {
margin: 30px;
width: 300px;
}
p {
font-weight: normal;
font-size: 16px;
font-family: Arial, Helvetica, sans-serif;
}
</style>
<body><p>It officiendam eum id quuntis itibus ditatem fuga. Ad quamus, solectotam re corem facerspid que voleceaquas eaqui cum faciasperia volesed mollacias utatur, ipienem hitatus cilluptaquis renimpo reiciuntem restrum dic toria precuptatet </p><img src="wave1.jpg" alt="ocean wave"><p>Empel minctetum id quamus nonserit esto officia que con coreperspis doluptatur aut ius nonsequis as volorer ferum, volupta volorpo rrovita tendis quam et volorem porestia ape dolut et quature ptureici ipsamet voluptat ommolor suntius </p></body></html>The result is as follows. As you can see, all four margin sides have been set to a value of 30 pixels. For the image, this really sets it apart from the text as well as from the left margin.
Final Note
Having a working knowledge of the use of the margin-top CSS property, as well as using the margin property for controlling all four margin sides at once, should give you the tools to control the spacing around text as well as images on your web page. Explore and utilize what you have learned to further enhance your website.
Where to Next?
The “Applying the margin-top CSS Property” tutorial should provide a starting point for further inquiry into the world of HTML Elements for customizing your web layout while always keeping in mind the practical applications with HTML and CSS.
Check out “Creating HTML Forms,” “An Introduction to Margins and Padding in CSS and HTML,” and Designing CSS Borders to enhance your understanding and expand your horizon.
HTML is a great way to start learning code, but the professional world demands more and more. Why not supercharge your skills and options by taking it even further. Enroll in our Intro to Programming Nanodegree program today!
