Basic CSS Tutorial
Negative Values
In some cases you can use a negative value to style something on your page, most notably, margins. My sample page has two headings in the header and they come with a default margin that makes them have what looks like a blank line between them. I want them to be closer together. What I can do is manipulate the bottom margin on the h1 or the top margin on the h2. I've already added a left margin to the h2, so I'll move it up. First, I'll try setting the top margin to 0, that works some of the time. margin-top: 0;You might also try setting the BOTTOM margin of the h1 to 0. margin-bottom: 0;
In this case, it didn't work so I'll start with a low negative value. Since my default font-size for the page is in ems, I'll use margin-top: -.5em;. Notice that there's a decimal in front of the 5, so I'm changing the margin to 1/2 em - half the height of the text INSIDE the heading. While my page has a font size of 1 em (about 16 pixels), the default value for a second-level heading is 1.5 em (about 24 pixels) and since I'm changing the heading, not the page, the value is based on the heading's font-size; -.5 isn't enough and I've settled on -.9.
My header is fixed and I'm ready to create a template from this sample.
How it looks. Margin between title and subtitle noticeably smaller.
Previous Next