Arthlete Arthlete - 5 months ago 6
CSS Question

CSS: Margin not present in the inspector but present on the page

I have a page that is using ng2-charts and the charts have a margin-right that I cannot find in the inspector. However when I scroll down and point at the margin(see screenshot) it clearly shows a right margin on the page. So there is margin but I cannot see it as a property and I cannot manipulate it.

Why?

enter image description here

Answer

This seems to be the Chrome Dev Tools' way of saying: the display:block; element doesn't occupy the full width, but there still can't be any element next to it, because of the block-display. Here's a code snippet to reproduce:

div {
  width: 50%
}
<div>Placeholder text</div>