Unnaturally increasing the width of a div :)

Question

let's say I have a div with right-aligned text and a fixed with:

div{
  width: 30px;
  text-align: right;
}

is it ok if I increase the width of this div to 35px trough padding, to move the text away from the edge and avoid adding another element inside of it?

div{
  padding-right: 5px;
}

I mean would any browsers behave weirdly about it?

Answer 1

Internet Explorer in Quirks Mode would have a problem with it due to it's box model . If this is a problem, I would use a nested div that uses margins instead. Your other option could be including an IE specific CSS file.

Answer 2

否，在所有主流浏览器中都可以。

Answer 3

The result would be exacly what you said: a div of total width 35px. It seems to me you understand what you are doing, but there is never a substitute for actually testing in all your target browsers.

While this small piece of CSS looks innocent, it can change the elements around them in a way you didn't expect.

Answer 4

This is an area that we are getting a lot more control over with css3. Have a look at http://www.quirksmode.org/css/box.html .