#3

Angular Components with Top/Bottom Spacing

2019-08-12

TAGS: angularcss

When trying to add top or bottom margin to an Angular component it has no effect unless you add display:block; to the component. Angular components default to display:inline which doesn't take top or bottom padding/margin.

Non-working example:

<my-component class="component"></my-component>
.component {
  margin: 2rem 0;
}

This has no effect because my-component is defaulting to display:inline.

Working example:

<my-component class="component"></my-component>
.component {
  margin: 2rem 0;
  display:block;
}