Question

I have a div:

<div class="frame" id="layer1"> ... </div>

with the styling:

.frame {
    position: absolute;
    width: 380px;
    height: 280px;
    overflow: hidden;
    padding: 0;
    margin: 0;
    border: 0;
}
#layer1  { background-color: red; color: #fff; }

But these are my results:

$(".frame").filter(":first").width(); // 384
$(".frame").filter(":first").outerWidth();  // 384
$(".frame").filter(":first").innerWidth();  // 384

I understand them all being the same since my padding and margins are 0, but where does this default 4px come from?

Answer 1

It got solved, thank you for you responses – it helped!

Had something else performing an addition to the equation. Feel stupid even asking this but your answers and questions did help me get to the bottom of it! I should have posted the entire script:

var layers = $(".frame");
console.log(layers);

var totalWidth = layers.size() + layers.filter(":first").innerWidth();
console.log(totalWidth);

As you see the problem lies in layers.size() + , it should have been multiplication and not addition and I should have seen it earlier.