Chrome 开发者工具橙色框

Question

I know that the orange box in developer tools represents margin but when I do margin: 0; to a block element it is still there (the orange box), I know that block element takes full width always and doesn't allow other elements on the same row/line, so what is that orange box which takes full width (of what's left of the width)? Is it just margin that you cannot remove or is it something else?

Answer 1

There is nothing about margin, its all about when you give display:block your elements wants to width:100% but you give width:200px so this orange box occured to keep the whole line.

İf you remove this orange box you can give your element display:inline-block; but at this time your another elements can come next to the element you are using. If you want to prevent this, you can make a container class and give it width:100%; .