March 29, 201214 yr Ok I don't know if it's because I'm tired and the basics have gone walkies from my head but I'm really struggling with something quite simple that I don't ever remember having a problem with before. Basically I can't for the life of me place a H1 tag inside a DIV without any padding or margins. No matter what solution I try there is always space above and below the h1 text. I thought it was a problem with my full code and maybe my reset CSS but I've tried removing everything, I've even broken it down entirely to a simple new page and I can't get it. http://jsfiddle.net/sncW9/1/ Have I gone completely mad here or is this harder to do then I'm remembering? All I want is the H1 text to have no top or bottom padding in the DIV, it should touch the top of it and in this example the bottom.
March 29, 201214 yr This helps <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html> <head> <style> * { margin: 0; padding: 0; } body{ margin:0 } #thediv{ background-color:green; border: 1px transparent solid;} div {outline: 1px dotted #FFF; } h1 {display: inline; line-height: 110px; font-size: 150px; background: lime; } </style> </head> <body> <div id="thediv"> <h1>TESTING 123</h1> </div> </body> </html> The lime background is just to show that the h1 tag goes to the top of the div. In jsfiddle the h1 is split into two lines which overlap, but with a greater width in a wider window this doesn't happen. I thought that line-height the same as the font-size would work, but it didn't. Edited March 29, 201214 yr by Wickham
March 30, 201214 yr I don't know if this is exactly what you were going for but it works in the fiddle as long as the h1 stays on one line. (like Wickham said) *{ margin:0; padding:0; } div{ height: 6em; border: 1px dotted #FFF; background-color:green; } h1 { font-size: 9em; line-height:.8em; } I did it with ems but you could substitute pixels instead.
Create an account or sign in to comment