Right now it’s set to 156px which is really 154px.
http://testgrid5432.blogspot.com/
154=152 height
155=153 height
156=154 height
157=155 height
What widths are we talking about? I may have missed them but I can’t see anything with a width of 154 or 156.
1 Like
I meant heights. each box.
Ah well, that’s 156 plus the border on top and bottom.
no it’s not cause the borders read 2px each.
What’s this then?
border: 1px solid red;
You tell me which one is correct?
I haven’t a clue what those refer to. All I can tell you is that 156 + 1 + 1 as given in the following CSS, makes 158.
.theBox {
background: #000000;
border: 1px solid red;
width: 350px;
height: 156px;
padding-left:50px;
padding-right: 0px;
}
the measurements.
Didn’t @chrisofarabia explain how things are calculated the other day?
1 Like
I just did this:
.outer {
display:table;
height:100%;
margin:0 auto;
border-collapse: collapse;
now 156=155px height
and the borders are now 1px each.
Which is correct.
The declared height <del>plus</del> <ins>minus</ins> 1px of border.
Yes, you said collapsed, didn’t you. (just woke up, sorry)
I’m confusing myself. My first statement was correct.
The declared height plus the width of the border (just x, not 2x) becomes the measured height inside the cell with the borders collapsed.
To test, change your borders to 10px and put a 1px outline around them.
Remember to measure inside the outline.
Add and remove <border-collapse:collapse> and measure the dimensions.
It’s collapsed!
the declared height is 156 and it’s reading 155px.
Yes if you don’t collapse the borders then you get 2px borders on adjoining cells. Border–resolution is a complicated subject but effectively the adjoining border becomes a single border and the ownership is complicated.
The height in the cell in the collapsing border model will be the height minus one border edge only (e.g. top border plus height).
2 Likes
So, then me putting in 156, is supposed to = 155, so, than, that’s right?
Please see my edited post #14.
1 Like