时间戳

首页 > 解决方案 > 如何在标题中设置边距底部？

html - 如何在标题中设置边距底部？

问题描述

以下代码片段显示了我希望标题在页脚中的位置。

        * {
            box-sizing: border-box;
        }
            /*HEADER*/
        .header{
            overflow: hidden;
            height: 91px;
            background-color: #000000;
            width: 100%;
        }

        .header a {
            color: #34E034;
            text-decoration: none;
        }

        .header a.logo {
            font-family: Wiz;
            font-size: 55px;
            font-weight: bold;
        }


        html, body {
            margin:0;
            padding:0;
        }
 <div class = "header">
        <div class="header-row">
            <div class="left-main-header">
                <div class="header-box">
                    <div class="new-header">Techwizards</div>
                    <a class="logo"><b>Techwizards</b></a>
                </div>
            </div>
        </div>
    </div>

如果我现在想为标题添加字体样式。这个：

@font-face {
        src: url("fonts/MagicSchoolTwo.ttf");
        font-family: wiz;
    }

我没有像这张照片那样的底部边距。在此处输入图像描述

我尝试了一切 - 边距，填充，但我没有得到底部的空间。我该如何解决？

标签： htmlcssfrontend

解决方案

修复了您的代码：

你的头部有一个绝对高度。那么“a”标签默认不能有边距，你必须在显示块上设置它来渲染边距。我还按照评论中的建议在您的标题中添加了 display flex。

密码笔

* {
  box-sizing: border-box;
}
html,
body {
  margin: 0;
  padding: 0;
}
/*HEADER*/
.header {
  background-color: #000000;
  width: 100%;
  display: flex;
}

.header a {
  color: #34e034;
  text-decoration: none;
}

.header a.logo {
  font-family: Wiz;
  font-size: 55px;
  font-weight: bold;
  display: block;
  margin-bottom: 40px;
}
<div class="header">
  <div class="header-row">
    <div class="left-main-header">
      <div class="header-box">
        <div class="new-header">Techwizards</div>
        <a class="logo"><b>Techwizards</b></a>
      </div>
    </div>
  </div>
</div>

推荐阅读