时间戳

首页 > 解决方案 > div宽度有间隙

html - div宽度有间隙

问题描述

所以我再次写我的英雄部分，因为我想给它添加一些动画。现在我注意到有一个小的“差距”，如下图所示： 看红圈

现在，有办法解决吗？我有点失落

.hero-section {
    height: 100vh;
    size: cover;
    display: flex;
    align-items: center;
    justify-content: center;
    
}

.hero-section > .hero-content > .top-heading {
    background-color: rgba(0, 188, 203, 0.7);
    border-radius: 5px;
}

.hero-section > .hero-content > .bottom-heading {
    background-color: rgba(0, 188, 203, 0.7);
    margin-top: 10px;
    border-radius: 5px;
}
            <div className="hero-section" id="hero-section">
                    <div className="hero-content">
                        <div className="top-heading">
                            <h1>Are you looking for an apartment in Israel?</h1>
                        </div>
                        <div className="bottom-heading">
                            <h1>Do you need help finding a buyer or a seller?</h1>
                        </div>
                    </div>
            </div>

标签： htmlcss

解决方案

.hero-section {
    height: 100vh;
    size: cover;
    display: flex;
    align-items: center;
    justify-content: center;
    
}

.hero-section > .hero-content > .top-heading {
    background-color: rgba(0, 188, 203, 0.7);
    border-radius: 5px;
    display: inline-block;
}

.hero-section > .hero-content > .bottom-heading {
    background-color: rgba(0, 188, 203, 0.7);
    margin-top: 10px;
    border-radius: 5px;
    display: inline-block;
}
.top-heading h1, .bottom-heading h1{
   display: inline;
   margin: 0;
   font-size: 1.9em;
}  
            <div class="hero-section" id="hero-section">
                    <div class="hero-content">
                        <div class="top-heading">
                            <h1>Are you looking for an apartment in Israel?</h1>
                        </div>
                        <div class="bottom-heading">
                            <h1>Do you need help finding a buyer or a seller?</h1>
                        </div>
                    </div>
            </div>

推荐阅读