Re: width and height

On Tue, Jan 25, 2011 at 11:00 AM, Bruno <bruno5544@gmail.com> wrote:
> 2011/1/25 Anton Prowse <prowse@moonhenge.net>:
>>
>> Yes, they do work for these so-called inline elements (such as <a>) which
>> flow in a line rather like text (and whose most common purpose is indeed to
>> contain text).  However, they don't always do what you expect: vertical
>> margins and padding won't have any affect on the final position of the box,
>> that is, they will bleed out of the line box in which the box sites and
>> hence they will possibly overlap other line boxes and their contents.
>>
>> This is because line box height is intimately related to font size, and for
>> inline elements it was decided that is typographically preferable to prevent
>> vertical margin, border, padding and indeed height from influencing or
>> overriding that behaviour.
>>
>> Insofar as width is concerned, it is the contents of the box which
>> determines the width, and again it's not possible to override that. This is
>> partly because the box might not lie on one line; it might be split over two
>> or more lines instead, and its "end" might be further to the left than its
>> "start" in left-to-right text rendering!  What would width even mean there?
>>
>> As Tab says, inline-block will solve your problem.
>>
>> Cheers,
>> Anton Prowse
>> http://dev.moohnhenge.net
>>
>
> But border is allowed under :hover, at least major browsers show it.
>
> Why then allow 'padding' and 'margin' for :hover when they also brake
> lines. Although 'margin' isn't that succesfull in this as 'padding'
> property. Why allow one and other more logical solution is out of the
> question?
> With padding (or margin) I'm practically forcing to do something that
> should be done with normal properties (width&height).
> Therefore I don't see any problems why not to allow width and height
> also under :hover, it's just question of implementation of this into
> UA, same as any other property.

This has nothing to do with :hover.  Inline elements *in general*
don't pay attention to 'width' or 'height'.  If you want to have an
inline-like element that respects 'width' and 'height', make it
inline-block instead.

~TJ

Received on Tuesday, 25 January 2011 19:11:39 UTC