在垫卡中放置内容

如何解决在垫卡中放置内容

我是前端开发和学习和实践 CSS 的新手。我正在使用如附图所示的垫卡

我的代码如下

   <div class="col-4">
                        <mat-card class="card">
                                <div class="header">
                                    <div class="content1">Content of My header</div>
                                    <div class="content2">Content of My header</div>
                                </div>
             
                                <button mat-button>MyButton</button>
                        </mat-card>
                    </div>

.card {
  background-color: red
  height: 47vh;
  display: flex;
  top: 2.5rem;
  flex-direction: column;
  right: 2rem;
}

.header {
  background-color: red;
  padding: 3% 0% 1% 3%;
}

如果我们看到 Header 在所有三个边上都留有空格。我想用红色覆盖整个标题而不离开这些边。我该怎么做？

解决方法

将 .card css 更改为：

  .card {
    background-color: red
    height: 47vh;
    display: flex;
    top: 2.5rem;
    flex-direction: column;
    right: 2rem;
    padding:0; <------Add this line
  }

,

在 .card 类中尝试 margin:0

,

我建议您将重置样式文件添加到您的网站。每个浏览器都有不同的默认设置，这将防止将来出现样式差异。这是如何做到这一点的基本方法：

HTML：

<link rel="stylesheet" href="/path/to/reset-css/reset.css" />

CSS：

@import '/path/to/reset-css/reset.css';

代码示例：

@import 'https://cdnjs.cloudflare.com/ajax/libs/meyer-reset/2.0/reset.min.css';
.wrapper{
  height: 47vh;
  border: 1px solid black;
}

.header{
   background-color: blue;
  display: flex;
  flex-direction: column;
  height: 90%;
}

  <div class="wrapper">
        <div class="header">
            <div class="content1">Content of My header</div>
            <div class="content2">Content of My header</div>
        </div>

        <button>MyButton</button>
    </div>