173073 - surrounding elements don't move to accomodate padding applied to anchors

Status: RESOLVED INVALID

(Core :: DOM: CSS Object Model, defect)

Description

[Scott J Garner]

User-Agent:       Mozilla/5.0 (X11; U; Linux i686; en-US; rv:1.1) Gecko/20021001 MultiZilla/v1.1.22
Build Identifier: Mozilla/5.0 (X11; U; Linux i686; en-US; rv:1.1) Gecko/20021001 MultiZilla/v1.1.22

A button-like effect can be achived with an anchor by applying certain style
elements. For example:

.button {
    color: #333333;
    background: #eeeeee;
    border: solid 1px #666666;
    padding: 5px;
    margin: 5px;
}

However, currently mozilla doesn't change the placement of surrounding elements
to take the padding into account and overlapping occurs.y

Reproducible: Always

Steps to Reproduce:
1. Place an anchor with padding inside of another element.
Actual Results:  
The padded anchor overlaps.

Expected Results:  
The container element should expand in proportion to the padding.

Comment 1

[Eric A. Meyer (dead account)]

The expected results are not the correct results.  Under CSS2,
padding, borders, and margins on inline elements have no effect on line-height,
and thus should have no effect on the height of a block-level element containing
the line.  See CSS2.1:10.8 (http://www.w3.org/TR/CSS21/visudet.html#line-height)
for details.  For example:
   "Although margins, borders, and padding of non-replaced elements do not enter
into the line box calculation, they are still rendered around inline boxes. This
means that if the height specified by 'line-height' is less than the box height
of contained boxes, backgrounds and colors of padding and borders may "bleed"
into adjacent line boxes. However, in this case, some user agents may use the
line box to "clip" the border and padding areas (i.e., not render them)."
(CSS2:10.8)

Comment 2

[Boris Zbarsky [:bzbarsky]]

Yep. What Eric said.  You need to increase your line-height.