Should width and height attributes of an img account for border and padding?

Question

According to w3schools:

Important: When you set the width and height properties of an element with CSS, you just set the width and height of the content area. To calculate the full size of an element, you must also add padding, borders and margins.

What I'm finding in practice with an <img...> tag, however, is that whether I specify width and height via CSS, or by using the width and height attributes of the <img...> tag, is that it's not just the size of my content being affected. The entirety of the image content, the padding, and the border are being sized to match my specified width and height.

To put some specific numbers on this:

I have flag icons measuring 32px * 22px. I want to scale them down 50% to 16px * 11px.
I want to put 1 px of padding around the flag icons, then a 1 pixel solid light gray border.
The total screen size of the result including padding and border should be 20px * 15px.

The CSS that works correctly is this:

.flag-image {
  width: 20px;
  height: 15px;
  position: relative;
  top: 3px;
  padding: 1px;
  border: lightgray 1px solid;
}

If it were true, however, that I'm only supposed to be specifying the content size, shouldn't that be 16px and 11px for width and height instead? Why, if I use 16px and 11px, is my flag icon squashed too small? I've taken a screen shot, magnified it, and counted pixels. It's 20px and 15px that give me correct results.

Is this something special about the img tag? Am I missing or misinterpreting the HTML or CSS specs?

BoltClock · Accepted Answer · 2018-03-21T04:41:02.300

3

Your assumption is correct — img elements by default should be treated the same as any other element when calculating sizes taking borders and padding into account. The most likely explanation for what you're observing is that your stylesheet or that of a third-party library or framework has a box-sizing: border-box rule somewhere that's affecting your img elements.

If removing that rule is not an option (e.g. because it's a universal rule), you can override it by resetting box-sizing to content-box so you can set the dimensions that make the most sense:

.flag-image {
  width: 16px;
  height: 11px;
  position: relative;
  top: 3px;
  padding: 1px;
  border: lightgray 1px solid;
  box-sizing: content-box;
}

Or you can choose to run with it and leave the width and height declarations as they are, with the disadvantage that the numbers seem counter-intuitive.

edited Mar 21 '18 at 04:41

answered Mar 21 '18 at 04:27

BoltClock

700,868
160
1,392
1,356

Upon inspecting the element, I do indeed see `box-sizing: border-box` specified, although I didn't specify it myself. It seems to have been set as a universal rule, the most likely culprit I can think of being the PrimeNG widgets that I'm using. – kshetline Mar 21 '18 at 04:39
@kshetline: Yeah. I meant to say "your stylesheet or that of a third-party library or framework", because chances are if you'd specified that yourself, you would have kept that in mind. – BoltClock Mar 21 '18 at 04:40

Bhuwan · Answer 2 · 2018-03-21T04:44:20.393

You will need to use box-sizing: border-box to the image if you want the exact width and height you have mentioned...See the below example

And also if you use width and height attributes to img rather than from css, then the total width of your image will be width + padding + border if box-sizing is not set to border-box

console.log("img1 dimension: " + $(".img1").outerWidth() + "x" + $(".img1").outerHeight())
console.log("img2 dimension: " + $(".img2").outerWidth() + "x" + $(".img2").outerHeight())
console.log("img3 dimension: " + $(".img3").outerWidth() + "x" + $(".img3").outerHeight())

.img1,
.img2 {
  width: 30px;
  height: 25px;
  position: relative;
  padding: 1px;
  border: lightgray 1px solid;
}

.img3 {
  position: relative;
  padding: 1px;
  border: lightgray 1px solid;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<img class="img1" src="http://via.placeholder.com/50x50">
<img class="img2" src="http://via.placeholder.com/50x50" style="box-sizing:border-box;">
<img class="img3" width="30px" height="25px" src="http://via.placeholder.com/50x50">

Should width and height attributes of an img account for border and padding?

2 Answers2