What Is the Margin in an H1 Tag?
H1 tags help you add descriptive headings to Web pages and create professional-looking websites. You can color headings, change their font styles and control the space around them by adjusting their margin values. Site designers often tweak h1 tags to achieve just the right visual layout they desire. You can do the same by learning how to manipulate h1 tag margins.
Other People Are Reading
-
Block-Level Tags
-
Images, divs and headings share at least one common attribute; they are all block-level elements that reside inside virtual boxes. The following h1 tag defines a typical heading you might find on a Web page:
<h1> Heading </h1>
If you print the page and draw a box around the word "Heading," the space outside the box represents the margin. The space inside the box that lies between the word and the box is the heading's padding. You have the ability to change a heading's margin without affecting its padding.
Setting H1 Margins
-
Use Cascading Style Sheets to set the properties of your Web page elements. The following example illustrates an h1 tag and two possible ways to set its margins using CSS:
<h1> Heading </h1>
h1 {margin: 2px 3px 4px 5px;}
h1 {margin: 20px}The first h1 CSS selector changes the top, right, bottom and left margins of all headings to 2, 3, 4 and 5 pixels. The second selector uses shorthand to change those four margin values to 20 pixels. If you do not set a heading's margin, browsers do it for you using default settings. The value used depends on the browser.
-
Block-Level Element Spacing
-
Block-level elements, such as headings, reside on separate lines in a Web browser. When one block-level element appears below another, browsers do add the top element's bottom margin value and the bottom element's top margin value to determine the vertical space between them. A browser instead uses the value of the largest margin as the vertical distance between the two elements. Remember this principle, especially when elements such as images beneath headings do not line up the way you think they should.
Tips
-
When you need elements below a heading to move closer to it, use a negative value for its bottom margin as shown below:
h1 {margin: -10px}
You may need to experiment with this value to find the number that moves content below the heading to the location you desire. Increase the vertical distance between a heading and elements below it by increasing the heading's bottom margin value. Site designers also use h2, h3, h4, h5 and h6 tags to create headings. As the number in a tag's name increases, its heading gets smaller. Use the same CSS rules to adjust margins on those tags as well.
-
References
Resources
- Photo Credit Hemera Technologies/Photos.com/Getty Images
