0

我是前端开发和学习和实践 CSS 的新手。如附图所示，我正在使用垫卡我的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 在所有三个边上都留有空格。我想用红色覆盖整个标题而不离开这些边。我怎样才能做到这一点？

4

3 回答 3

0

将 .card css 更改为：

  .card {
    background-color: red
    height: 47vh;
    display: flex;
    top: 2.5rem;
    flex-direction: column;
    right: 2rem;
    padding:0; <------Add this line
  }
于 2021-03-23T18:33:49.420 回答
0

在 .card 类中尝试 margin:0

于 2021-03-23T18:35:22.990 回答
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>

于 2021-03-23T18:43:10.267 回答