Member Avatar for xescjp

Hello everybody:

I am using one table that has cells that msut be 20px height.
These cells have border on top and bottom. They are 1px width.
My question is, which would be the total height of cell including borders?

20px (borders included)
or
20px + 1px(border top) + 1px (border bottom)

Thanks a lot.
xescjp

  • 2 Contributors
  • 2 Replies
  • 191 Views
  • 27 Minutes Discussion Span
  • Latest Post Latest Post by xescjp

Dani AI

Generated

As pointed out, the CSS box model is what decides this. With the browser default (box-sizing: content-box) the declared height applies to the content box only, so borders sit outside that height. In other words, height: 20px plus border-top: 1px and border-bottom: 1px renders an outer height of 22px (20 + 1 + 1).

Example (default behavior):

/* default: content-box -> outer height = content + borders */
td {
  height: 20px;
  border-top: 1px solid #000;
  border-bottom: 1px solid #000;
  /* box-sizing: content-box is the UA default */
}

If the goal is an exact total of 20px including borders, use box-sizing: border-box. That makes the declared height include padding and border, so the outer height stays 20px and the content area becomes 18px.

/* borders included in the declared height -> outer height = 20px */
td {
  box-sizing: border-box;
  height: 20px;
  border-top: 1px solid #000;
  border-bottom: 1px solid #000;
}

Practical caveats: with border-collapse: collapse adjacent cell borders are shared (so you may not get a +2px effect between cells); table-cell height can act as a minimum and will expand if content/padding/line-height demand more space; and quirks mode (missing DOCTYPE) or older browser behaviors can change results. For a strict outer height use box-sizing: border-box, an appropriate line-height (or clipped content with overflow: hidden), and test with and without border-collapse.

Recommended Answers

All 2 Replies

Member Avatar for pritaeas

See this for an explanation of the box model. As you can see, you also need to include margin and padding into your calculation.

Edited by pritaeas
Member Avatar for xescjp

Thnak you very much pritaeas.

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.