Geek Answers Handbook

Setting the top field of the h1 element in the header does not work properly

I used the html5 header tag and the h1 tag inside it. After setting the top field property of the h1 element in my header to 0px, I can remove the top edge of the header, but I want the h1 element inside my header to have a top edge of about 15 pixels.

Now, when I try to set the top edge of the h1 element, it also creates a top margin for the title that I don't want.

Can someone help me with this ...?

<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <link href="normalize.css" rel="stylesheet"> <link href="style.css" rel="stylesheet"> <title>Codename : ENT</title> </head> <body> <header> <h1>Site Title / LOGO</h1> <p>Site Tagline / Slogan / One liner.</p> <p></p> <nav></nav> </header> <div id="content_wrapper"></div> <footer> </footer> </body> </html>

and CSS

 header { background-color:#ff0 } header h1 { margin-top:0; margin-left:15px } header p { margin-left:15px }
+7
html css html5 css3
source share
6 answers

Use padding-top for h1 or header or use overflow:hidden for header

+6
source share

The problem you are facing is the call to collapse fields

Here is an excerpt from this mozilla article :

Parent and first / last child

If there is no border, indentation, inline content or permission to split the edge of the top edge of the block with the top edge of its first child block, or there is no border, fill, inline content, height, min-height or max-height to separate the bottom edge of the block with the edge bottom of his last child, then these fields are crumbling. The curled edge ends outside the parent .

So I could fix this by adding a border to the title element - DEMO

 header { border: 1px solid transparent; }

or by permission - DEMO

 header { overflow: hidden; }

or indentation - DEMO

 header { padding: 1px; }

... etc. etc.

+5
source share

Add padding-top: 15px; to the properties of h1 .

+1
source share

try this one

 header h1 { padding-top:15px; margin-top:0; margin-left:15px }
+1
source share

As already mentioned, every other answer that you really want is padding-top, not margin-top.

The difference between the two is quite easy to understand, in fact, the filling is inside the element, and the margin is outside the element, the last two examples from this tutorial show this pretty well http://html.net/tutorials/css/lesson10.php

Thus, with your code, the header element is a container, adding margin-top:15px will move the element down 15px, that is, the entire container, the yellow background included, is below. Add padding-top:15px , increasing the height of the title element by 15px, adding to the top of the element and moving the content down, leaving a yellow gap of 15px at the top.

+1
source share

Demo

CSS

 header { background-color:#ff0; margin:0; display: inline-block; /* add this to make it inline as <header> id block element by default */ width: 100%; /* for 100% width */ } header h1 { margin-top:15px; margin-left:15px } header p { margin-left:15px }
+1
source share

More articles:


All Articles