Parece que no puedo entender la idea de tener este contenedor en una tarjeta md.
En mis tarjetas de material, tengo esto:
<div class="mat-card-header-text"> </div>He visto que otras personas lo notan. Causa un espacio de 40px a la izquierda de mi título. Ningún CSS parece afectarlo tampoco.
Estoy usando Angular 4.x y Material2.
Este div adicional es bastante molesto. Sin embargo, resulta que puede usar la perforación de sombras para aplicarle un estilo sin cambiar el modo de emulación de CSS. Puedes hacer esto usando el combinador ::ng-deep como tal:
::ng-deep .mat-card-header-text { /* CSS styles go here */ margin: 0px; // for example to remove the margin }También puede reemplazar todo el encabezado con sus propias clases de CSS:
<mat-card> <div class="your-header"> <div class="your-title"> Your title here </div> </div> <mat-card-content> Stuff goes here </mat-card-content> </mat-card>Según su recomendación reciente https://angular.io/guide/component-styles , esto funcionó para mí:
:host /deep/ .mat-card-header-text { margin: 0; }Lo arreglé proporcionando un margen izquierdo negativo a md-card-title
<md-card-title style="margin-left:-8px;">