padding-top: irregularity

RESOLVED INVALID

Status

()

Core
Layout: Block and Inline
--
major
RESOLVED INVALID
7 years ago
7 years ago

People

(Reporter: wtroots, Unassigned)

Tracking

Firefox Tracking Flags

(Not tracked)

Details

(Reporter)

Description

7 years ago
User-Agent:       Mozilla/5.0 (Windows; U; Windows NT 5.1; en-GB; rv:1.9.2.15) Gecko/20110303 Firefox/3.6.15 ( .NET CLR 3.5.30729; .NET4.0E)
Build Identifier: Mozilla/5.0 (Windows; U; Windows NT 5.1; en-GB; rv:1.9.2.15) Gecko/20110303 Firefox/3.6.15 ( .NET CLR 3.5.30729; .NET4.0E)

The padding-top attribute does not behave as expected. I have marked it as a 'major' bug, because if it is indeed a bug, as opposed to a mix-up on my part with css inheritance, then it needs fixing quickly because there may be instances where content is not visible, unbeknown to the developer of that page.
In the simple example below, the padding-top is applied to a <div> element. The next elements are <h1>. Alerting the padding-top of these <h1> elements from auto to inherit then to 0 makes no difference to that applied to the <div> elements.
The problem of the unexpected size-difference between 1px an 0px persists.

Reproducible: Always

Steps to Reproduce:
1. Copy HTML code below.
2. Paste into text-editor and save as an html file.
3. View local file in browser.
Actual Results:  
The difference in padding between setting padding-top to 1px, compared with setting it to 0 is not 1px.
The difference appears a lot greater. 
*Firebug also believes it is 1px, though the difference is visibly more.

Expected Results:  
When padding-top is set to 1px, it should display as 1px. When it is set to 0 or 0px, it should display as 0px. The difference is visibly more.

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title>Bug Report</title>
    <style type="text/css">
        body
        {
            font-family: Arial, Sans-Serif;
            font-size: 14px;
            color: #000000;
        }
        
        div.intro
        {
            background-color: #e0e0e0;
            padding: 10px;
            padding-top: 1px;
            margin: auto;
        }
        
        div.second
        {
            
            background-color: #e0e0e0;
            padding: 10px;
            padding-top: 0;
            margin: auto;
        }
        
        div.conclusion
        {
            background-color: #e0a0a0;
            padding: 10px;
            margin: auto;
        }
        
    </style>
</head>
<body>
    <div class="intro">
        <h1>
            First &lt;div&gt;</h1>
        <p>
            A paragraph containing some text. A paragraph containing some text. A paragraph
            containing some text. A paragraph containing some text. A paragraph containing some
            text. A paragraph containing some text. A paragraph containing some text. A paragraph
            containing some text.
        </p>
    </div>
    <div class="second">
        <h1>
            Second &lt;div&gt;</h1>
        <p>
            Another paragraph containing some text. Another paragraph containing some text.
        Another paragraph containing some text. Another paragraph containing some text.
        Another paragraph containing some text. Another paragraph containing some text.
        Another paragraph containing some text. Another paragraph containing some text.
    </div>
    <div class="conclusion">
        <h1>
            Bug Report...</h1>
        <p>
            Both <span style="font-family: monospace;">&lt;div&gt;</span> objects above have the same css characteristics, apart from
            the <span style="font-family: monospace;">padding-top</span> attribute, which is
            set to <span style="font-family: monospace;">1px</span> in the fisrt case and <span
                style="font-family: monospace;">0</span> (px) in the second. However, the outcomes
            are more than one pixel in difference. <br /><br />
            Styles for each <span style="font-family: monospace;">&lt;div&gt;</span> are declared in classes, in a style-sheet within the <span style="font-family: monospace;">&lt;head&gt;</span> section.
            Is this a bug or is something doing an inherit, unexpectedly? This <span style="font-family: monospace;">
            &lt;div&gt;</span> has padding set to <span style="font-family: monospace;">10px</span> all-round.
            
        </p>
    </div>
</body>
</html>

Comment 1

7 years ago
What you are seeing here is collapsing margins.

"...adjoining margins (no non-empty content, padding or border areas or clearance separate them) of two or more boxes (which may be next to one another or nested) combine to form a single margin."

http://www.w3.org/TR/CSS21/box.html#collapsing-margins
Status: UNCONFIRMED → RESOLVED
Last Resolved: 7 years ago
Component: General → Layout: Block and Inline
Product: Firefox → Core
QA Contact: general → layout.block-and-inline
Resolution: --- → INVALID
You need to log in before you can comment on or make changes to this bug.