atom feed2 messages in org.w3.www-styleRe: Setting the height of a BR elemen...
FromSent OnAttachments
Matthew BrealeyFeb 26, 2000 1:49 pm 
fantasaiFeb 29, 2000 3:50 am 
Subject:Re: Setting the height of a BR element using CSS
From:Matthew Brealey (
Date:Feb 26, 2000 1:49:05 pm

NB . cross-posted to www-style and CIWAS. David Baron <> wrote in article <>...

Because it is creating a line break, the <BR> does not have a height - it is just the same as a natural line break, caused by text wrapping at the right edge of the element (or left with right-to-left text), and therefore has no height.

Why do you think that? What makes BR different from any other inline element?

By the same argument, what makes a forced line break any different from a natural one?

Surely these should be equivalent:

<pre> This is preformatted with a line break here: that will not affect the height of the line box. </pre>

<p> This is not preformatted with a line break here:<br> that should not affect the height of the line box. </p>

According to the current spec, the 'line-height' property should probably influence the height of a BR element,

It isn't as specific as that. It says that empty inline elements are considered for the purposes of line box height calculation. It doesn't mention <br>.

although it is unlikely to do so in any current browsers. One interesting question is whether it should influence the line box only on the line ended by the BR element, or on the next line as well.

Yes. I have pointed out the problems of treating <br> as a normal element (namely confusing distortion of line box heights, disruption of line box height calculations, the issue of whether it should be treated as BR:before {content: \A} or BR:after, which lead to different results, the artificial nature of trying to pigeonhole it into a CSS concept, the fact that there is no need to allow the full range of CSS properties on it, and above all the overwhelming sense that a forced line break should not be any different from the natural one, etc.).

I think it might be better if the BR element were defined as a special class of element that just created a line-break, but CSS doesn't say that now.

I agree.

<proposal> The BR element

The BR element, which creates a forced line break, should be treated in the same manner as natural line breaks insofar as it should have no effect on line box heights, and CSS properties have no effect upon it. </proposal>

Arguably page-break-before and after should apply, but this leads to a somewhat odd status for BR in that on the one hand it is not being treated as a normal element, but instead as an instance of \A in generated content, but on the other hand it is being treated as a normal element in that (a limited subset of) CSS properties are being allowed on it.

Note however, that it is not unique that HTML elements cannot be described merely using a generic element and CSS. Indeed it is being proposed that this continue into CSS 3 (this from the UI WD):

Since this proposal serves to simulate various user interface and forms elements in HTML4, it is perhaps useful to call out what specifically is believed to be outside the scope of CSS, or better suited to document structure rather than style and therefore not addressed by this proposal: .... The file INPUT element. The FIELDSET, LEGEND and ISINDEX elements.

Thus such acceptances (i.e., of the non-equivalence of and HTML and CSS or indescribability of HTML in CSS) are not unprecedented (indeed similar suggestions were recently made in respect of bidi by Nir Dagan).

Incidentally, I'm not sure that LEGEND could be described in CSS. For example, take this piece of code: <fieldset> <legend> Search this site </legend> <input type="text"> </fieldset>

That cannot be described using CSS. It is necessary to insert an additional element: FIELDSET {z-index: -2; position: relative; padding-top: .5em; border: solid 2px; display: block} OUTERLEGEND {position: absolute; z-index: -1; top: -.5em; line-height: 1; left: 1%} INNERLEGEND {background: white}

Thus this code recreates the HTML code above in Win IE 4 (with the exception of the colour, which is a UI colour but doesn't seem to correspond to any of the CSS on): <div style="z-index: -2; position: relative; padding-top: .5em; border: solid 2px> <span style="position: absolute; z-index: -1; top: -.5em; line-height: 1; left: 1%"> <span style="background: white"> Search this site </span> <input type="text"> </div>

Note that it is impossible to do away with the inner SPAN and that the background cannot be found by normal methods because it corresponds to the topmost non-transparent background directly 'under' the LEGEND.

In addition, IE appears to allocate an unsuppressable space above the FIELDSET in which to place the LEGEND; for example: <fieldset style="line-height: 0; padding: 0; margin: 0"> <input type="text"> </fieldset> <fieldset style="line-height: 0; padding: 0; margin: 0"> <input type="text"> </fieldset>, which should (?) result in no space between the fieldsets does not, because it allocates space for the LEGEND. Perhaps some kind of standardization should be made.