fix(material/checkbox): set display on host node (#20961)

Currently the host nodes are `display: inline` by default which doesn't allow for
things like `margin` and `width` to be set. These changes switch to `inline-block` which
is a bit more flexible.

Fixes #20954.

Author: crisbeto

src/material-experimental/mdc-checkbox/checkbox.scss

@@ -9,6 +9,10 @@
 @include mdc-form-field-core-styles($query: $mat-base-styles-query);
 
 .mat-mdc-checkbox {
+  // The host node defaults to `diplay: inline` so
+  // we have to change it in order for margins to work.
+  display: inline-block;
+
   // The MDC checkbox styles related to the hover state are intertwined with the MDC ripple styles.
   // We currently don't use the MDC ripple due to size concerns, therefore we need to add some
   // additional styles to restore the hover state.

src/material/checkbox/checkbox.scss

@@ -177,6 +177,10 @@ $_mat-checkbox-mark-stroke-size: 2 / 15 * $mat-checkbox-size !default;
 .mat-checkbox {
   @include mat-private-animation-noop();
 
+  // The host node defaults to `diplay: inline` so
+  // we have to change it in order for margins to work.
+  display: inline-block;
+
   // Animation
   transition: background $swift-ease-out-duration $swift-ease-out-timing-function,
               mat-elevation-transition-property-value();