Results 1 to 5 of 5

Thread: Extra top padding in a container when using HTML5 doctype

  1. #1
    Join Date
    Nov 2009
    Posts
    211
    Thanks
    40
    Thanked 1 Time in 1 Post

    Default Extra top padding in a container when using HTML5 doctype

    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?

  2. #2
    Join Date
    Jul 2008
    Location
    Derbyshire, UK
    Posts
    2,024
    Thanks
    16
    Thanked 315 Times in 313 Posts
    Blog Entries
    13

    Default

    If you are referring to the placement of the text inside the tan bar, the spacing above and below is equal on the uppercase letter. I believe that this is just standard alignment of uppercase in relation to lowercase. It does similar with the 4.01 Transitional doctype too, minus 1px above and below for how that doctype renders (not a bug - just differences in the way doctypes render in different browsers).

    I notice that you are using vertical-align: middle; on inline elements within the div. As I understand, this will align the middle of the child image with the middle of child lowercase letters, rather than affecting alignment of elements overall within the parent container, so again, uppercase and lowercase lettering will seemingly create visual discrepancies in such a narrow bar, but I think that's more to do with the way the human eye sees the "weight" of the surrounding space. More info on vertical-align: http://css-tricks.com/what-is-vertical-align/

    If you are trying to vertically align elements within the tan bar, have a look at these methods: http://www.vanseodesign.com/css/vertical-centering/

    If this isn't what you are meaning or trying to do, please clarify your question and requirements.
    Focus on Function Web Design | Latest News RSS | Facebook | Twitter |
    Fast Edit (A flat file, PHP web page editor & CMS. Small, FREE, no database!) | Fast Edit BE (Snippet Manager) (Web content editor for multiple editable regions!) | Fast Apps |
    The only limit to creativity is imagination: JemCon.org

  3. #3
    Join Date
    Nov 2009
    Posts
    211
    Thanks
    40
    Thanked 1 Time in 1 Post

    Default

    Quote Originally Posted by Beverleyh View Post
    It does similar with the 4.01 Transitional doctype too, minus 1px above and below for how that doctype renders (not a bug - just differences in the way doctypes render in different browsers).
    That's the problem: why should there be such a difference between different DOCTYPEs when it comes to a container height and what exactly is this difference? The content is the same, so the container height should be the same.

  4. #4
    Join Date
    Jul 2008
    Location
    Derbyshire, UK
    Posts
    2,024
    Thanks
    16
    Thanked 315 Times in 313 Posts
    Blog Entries
    13

    Default

    As I understand, the 'Transitional' doctypes (or no doctype at all) instruct some browsers to render in quirks mode - a loose interpretation of W3C specification which emulates legacy behaviors and bugs of old, version 4 browsers.

    And 'Strict' or 'XHTML' doctypes instruct browsers to render in standards (or "almost standards") mode - a strict rendering mode that follows W3C specifications for HTML/CSS, etc, as closely as possible. Therefor switching between doctypes results in rendering differences between different browsers and different doctypes.

    I believe that the different "padding" you're referring to is actually a margin and comes down to the way an <img> tag is rendered in Strict mode (the HTML5 doctype in your example triggers Strict mode, compared to the Transitional 4.01 one). Inline-elements have space reserved for the hanging letters like "j" or "y", which is fine for <span> tags and such, but <img> doesn't have hanging letters, yet in Strict mode, space is still reserved for them, which leaves an unused bottom-margin. So its a bottom-margin on the img tag that you're seeing, rather than a padding from the parent div, except it wont look like a bottom-margin due to your use of vertical-align: middle; on the <span> and <img> - take that off and the reserved bottom-margin is visible (in Strict mode).

    But to complicate matters, some browsers render in "almost strict" mode, which changes the way that <img> tags are rendered - namely, like block-level elements instead of inline-elements, hence the removal of the bottom-margin, because block-level elements don't have space reserved for hanging letters ("j", "y", etc).

    To learn more about doctypes and rendering modes in different browsers, see this article: https://hsivonen.fi/doctype/ There's a nice table that shows which doctype induces which rendering mode, and in which browsers, which is quite interesting because you'll see where Strict and "almost strict" kick in to action.
    Last edited by Beverleyh; 03-25-2014 at 01:23 PM. Reason: clarification
    Focus on Function Web Design | Latest News RSS | Facebook | Twitter |
    Fast Edit (A flat file, PHP web page editor & CMS. Small, FREE, no database!) | Fast Edit BE (Snippet Manager) (Web content editor for multiple editable regions!) | Fast Apps |
    The only limit to creativity is imagination: JemCon.org

  5. #5
    Join Date
    Nov 2009
    Posts
    211
    Thanks
    40
    Thanked 1 Time in 1 Post

    Default

    Thanks for the answer and explanations!

Similar Threads

  1. HTML5 help
    By john123a in forum HTML
    Replies: 3
    Last Post: 06-30-2011, 01:42 AM
  2. Replies: 2
    Last Post: 08-10-2009, 01:45 AM
  3. Extra container in swapimage script
    By toby in forum JavaScript
    Replies: 0
    Last Post: 06-30-2009, 08:45 AM
  4. Resolved Safari Extra or Unextra Padding
    By bluewalrus in forum CSS
    Replies: 0
    Last Post: 01-22-2009, 06:33 PM
  5. Replies: 4
    Last Post: 10-28-2005, 08:05 PM

Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •