The Web Design Group

... Making the Web accessible to all.

Welcome Guest ( Log In | Register )

 
 Reply to this topicStart new topic
> Unexpected blank line at top of page, Pretty simple html. Do all renderers do this?
Gil Dawson
post Nov 4 2020, 05:06 PM
Post #1





Group: Members
Posts: 2
Joined: 4-November 20
From: Angeles Forest, California
Member No.: 27,616
Hi--

The following code renders in both Firefox and Safari with an unexpected blank line at the top of the page (Right above "Test Line"):

<!DOCTYPE html>
<html lang="en-US" xmlns="http://www.w3.org/1999/xhtml">
<meta charset="utf-8">
<HEAD>
<TITLE>Test Vertical Spacing</TITLE>
</HEAD>
<BODY>
<p>Test Line</p>
</BODY>
</HEAD>
</HTML>

(Sorry but I have no available server.)

This can be a biggie with large fonts.

What's causing the blank line, and can I get rid of it?

--Gil
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
Christian J
post Nov 4 2020, 06:59 PM
Post #2


.
********

Group: WDG Moderators
Posts: 9,653
Joined: 10-August 06
Member No.: 7
Probably it's the default margin of the P element. You can change it with CSS.

BTW, the META element should be inside the HEAD section, and there's a HEAD end tag below the BODY section that shouldn't be there.
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
pandy
post Nov 5 2020, 01:56 AM
Post #3


🌟Computer says no🌟
********

Group: WDG Moderators
Posts: 20,730
Joined: 9-August 06
Member No.: 6
And also the margin/padding browsers apply to BODY. You need to eliminate both that and margin on P if you want the text snug at the top of the page.

https://htmlhelp.com/faq/html/effects.html#no-margins

There's some old stuff there you don't need anymore though. The below is enough.

CODE
body      { margin: 0; padding: 0 }
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
Gil Dawson
post Nov 7 2020, 06:18 PM
Post #4





Group: Members
Posts: 2
Joined: 4-November 20
From: Angeles Forest, California
Member No.: 27,616
Thanks, guys!

Both of you were a big help.

As you suggested, I had to style both:

body { margin: 0; padding: 0 }
p { margin: 0; padding: 0 }

Leaving either one out isn't quite as snug.

And special thanks for catching my html typos. I would have sworn that I...

Thanks,

--Gil
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
« Next Oldest · Markup (HTML, XHTML, XML) · Next Newest »
 

Reply to this topicStart new topic
1 User(s) are reading this topic (1 Guests and 0 Anonymous Users)
0 Members:

 

Display Mode: Standard · Switch to: Linear+ · Switch to: Outline

Track this topic · Email this topic · Print this topic · Subscribe to this forum

- Lo-Fi Version Time is now: 19th April 2024 - 07:49 PM
Invision Power Board © 2024  IPS, Inc.
Licensed to: HTMLHelp.com, LLC