Hacker News Reader

Comment by trnglina | Hacker News Reader

And for anyone who isn't familiar with (what I would consider) the most important difference in this use-case: borders affect the positioning of other elements, whereas outlines do not. You don't want to be using a temporary border, since it can significantly affect the layout of your site when you remove it.

View on HN

* { 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.

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.

For this case of debugging, though, borders might actually be preferable because outlines would overlap, potentially obscuring the DOM depth

When I'm coding DIV layouts by hand, I temporarily assign each DIV with a random background-color. Once I have the layout and responsiveness required, I strip the background-color setting on each DIV as I fill them up with content. Works for me.

Yep, that is exactly why I do this! Great explanation.

Reply on news.ycombinator.com