[StefanOnRails]

Hi guys,

Did you ever have the feeling that you knew all you need to understand some concept, but suddenly something unexpected happens and crushes your so called "perfect understanding"? This happened to me today. I'm mostly a PHP guy, so I don't care too much about CSS styling and stuff, but today I wanted to achieve a perfect alignment of some buttons on my page, so I write this simple css rule (yeah, I know, I destroyed the whole appearance of the buttons by customizing the border, but that's not the point here):

button
{
  width: 35px;
  height: 35px;
  border: 2px solid #000;
}

The point is, when I took a closer look using my "eagle eye" (and Chrome Development Tools ) I realized that the border's width was subtracted from the content area (leaving me with a 31 x 31 box) which it shouldn't happen because that area's dimensions are set by width & height properties. Am I right? Please say yes . So my question is: why did the content area of my buttons got shrinked by border's width? Aren't the borders supposed to wrap the padding area, and so, have no affect on content area or are buttons handled differently by the browser?

This post has been edited by StefanOnRails: 17 September 2012 - 08:49 AM

[BenignDesign]

It depends on the browser.

I often use borders around images and make myself crazy trying to manage a unified look. If the image has 5px padding, one browser will render 5px of padding between the image and the border.... another browser will render the border tight against the picture with the padding around the outside.

If it really bothers you that much, you may want to look at possibly getting rid of the border altogether or using browser-specific CSS.

[StefanOnRails]

Thanks for replying my question, I was starting to think nobody will. Oh, so are handled differently by browsers? OK, I think the safest option would be to get rid of buttons and customize a div to look like one.