如何从标题中裁剪出额外的空间？

Question

我刚开始为本地说唱歌手开发一个网站，我很开心，我很紧张。

我正在制作网站徽标和导航栏，我遇到了一些问题。

这是我到目前为止所得到的：

我想要的是将额外的空间裁剪成橙色的“花旗B”文本的顶部和底部。摆脱了那个不必要的空间后，我想把它对齐到limegreen div的底部。

以下是所有相关代码。

HTML：

<div class="title-wrap">
            <div class="title1">
                <h1>Citi B.</h1>
            </div>

            <div class="title2">
                <img src="img/logo.jpg" alt="Dog Logo">
            </div>
        </div>

CSS：

.title-wrap {
width: 60%;
margin: auto;
background: limegreen;
height: auto;
}

.title1, .title2 {
background: orange;
}

.title1 h1 {
font-size: 6em;
bottom: 0px;
margin: 0px;
padding: 0px;
font-family: 'Pacifico', cursive;
}

Flexbox代码：

.title-wrap {
-webkit-flex-direction: row;
-webkit-justify-content: space-between;
-webkit-align-items: flex-end;
}

这个问题解决起来可能非常简单，但无论出于何种原因我都会画一个空白。感谢您提供任何帮助！

Answer 1

我不明白你的问题，但我认为你的问题是关于页面顶部的空间 你应该知道身体有一点边缘，你应该删除它。 这段代码可以帮到你。

body {
margin: 0;
}

祝你好运。