Hacker News Reader

* { box-sizing: border-box; }

I have never wanted anything other than this behaviour, so I pretty much always include it when starting on a fresh project.

View on HN

Borders still affect the positioning of things even with box-sizing set to border-box. For example, here "Block 1" is still two pixels taller than "Block 2":

<div style="padding: 8px; border: 1px solid black"> Block 1 </div>

<div style="padding: 8px;"> Block 2 </div>

https://jsfiddle.net/t4rkvfzx/

Does that really matter though? A difference of 2px for something temporary doesn't seem like much concern. While I understand the implication is that these can accumulate and cause larger layout issues, the purpose of this practice is to highlight those areas to remove that accumulation anyway

The bigger issue is that you don't know if a UI inconsistency is a bug or a side-effect.

Reply on news.ycombinator.com