The Web Design Group

... Making the Web accessible to all.

Welcome Guest ( Log In | Register )

 
 Reply to this topicStart new topic
> Extra top padding in a container when using HTML5 doctype
RainLover
post Mar 24 2014, 12:55 PM
Post #1


Advanced Member
****

Group: Members
Posts: 216
Joined: 16-November 09
Member No.: 10,346
There is extra top padding in the following div:

CODE
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>Extra Top Padding</title>
    <style>
        div {
            background: tan;
        }
        div * {
            vertical-align: middle;
        }
        span {
            font-size: 16px;
        }
    </style>
</head>

<body>
    <div id="container">
        <img src="https://ssl.gstatic.com/images/icons/gplus-16.png"><span>Some text</span>
    </div>
    <p id="indicator"></p>
    <script>
        document.getElementById('indicator').textContent = document.getElementById('container').clientHeight;
    </script>
</body>

</html>


DEMO

It shows correctly if you use HTML 4.01 Transitional doctype:

CODE
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">


Is it a bug in HTML5?
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
pandy
post Mar 24 2014, 01:21 PM
Post #2


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

Group: WDG Moderators
Posts: 20,730
Joined: 9-August 06
Member No.: 6
No. It's the difference between Strict Mode and Almost Strict Mode. You'd get the same with the HTML 4.01 Strict docype. It's a mess.

https://hsivonen.fi/doctype/
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
Frederiek
post Mar 25 2014, 03:03 AM
Post #3


Programming Fanatic
********

Group: Members
Posts: 5,146
Joined: 23-August 06
From: Europe
Member No.: 9
And it's the default margin/padding browsers set to BODY. Use a reset.css (e.g. Eric Meyer's reset.css) or simply use:
CODE
* {
    margin: 0;
    padding: 0;
}
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
pandy
post Mar 25 2014, 02:00 PM
Post #4


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

Group: WDG Moderators
Posts: 20,730
Joined: 9-August 06
Member No.: 6
Surely that can't end up inside the DIV? unsure.gif
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
Christian J
post Mar 25 2014, 05:45 PM
Post #5


.
********

Group: WDG Moderators
Posts: 9,656
Joined: 10-August 06
Member No.: 7
Maybe Frederiek is thinking of collapsing margins? https://developer.mozilla.org/en-US/docs/We...rgin_collapsing

Not sure if a global reset is required for that, though. unsure.gif

User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
Frederiek
post Mar 26 2014, 04:18 AM
Post #6


Programming Fanatic
********

Group: Members
Posts: 5,146
Joined: 23-August 06
From: Europe
Member No.: 9
I'm talking about the default margin browsers set to BODY. In Safari, that margin is 8px on all sides. The DOCTYPE has nothing to do with that.

Sure, a margin: 0; can also only be set to BODY, if you don't want to use a global reset.
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
pandy
post Mar 26 2014, 04:47 AM
Post #7


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

Group: WDG Moderators
Posts: 20,730
Joined: 9-August 06
Member No.: 6
OK, but the OP asked about the extra padding in the DIV, that's why we didn't understand.
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
Frederiek
post Mar 26 2014, 04:53 AM
Post #8


Programming Fanatic
********

Group: Members
Posts: 5,146
Joined: 23-August 06
From: Europe
Member No.: 9
The OP called it padding, while in fact it's margin. Maybe just not knowing how to call it.

Otherwise, it's the default top and bottom padding on the P element (1em in Safari, resulting in 16px). In that case, a global reset would eliminate that.
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
« Next Oldest · Cascading Style Sheets · 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: 25th April 2024 - 01:29 AM
Invision Power Board © 2024  IPS, Inc.
Licensed to: HTMLHelp.com, LLC