html - CSS:在增加文字大小的同时保持横幅的高度

Question

我需要增加标题的字体大小，但是这样做也会改变主页横幅的高度。这会为右侧的图像生成一个不应该存在的间隙，因为图像应该与主页横幅的底部边界接触。

正确但小的文本:

不正确但大文本:

HTML:

<div class="container-fluid my_header_bg_color">

    <header class="my_header_bg_color">
        <br>
        <br>


        <div class="row">

            <div class="col-md-6">

                <div class="my_custom_banner_left">

                    <p class="my_title_banner">Stickers personalizados</p>


                    <p>Fáciles de ordenar por internet, diseño de conceptos gratis, envíos rápidos </p>

                </div>

                <div class="row my_bottom_margin">


                    <div class="col-md-1"></div>
                    <div class="col-md-5">

                        <a href="stickers" class="btn btn-azul text-white btn-block">Comprar</a>

                    </div>

                    <div class="col-md-5">

                        <a href="{% url 'shop:SamplePackPage' %}" class="btn btn-naranja text-white btn-block">Muestras
                        </a>


                    </div>



                </div>
            </div>

            <div class="col-md-6 ml-auto">

                <img class="my_image_banner my_image_padding" src="{% static 'img/banner-home2.png' %}">

            </div>

        </div>




    </header>

</div>

CSS:

.my_title_banner {
    font-size: 40px;
    font-weight: bold;
    color: white;
    margin-bottom: 0px;
}

.my_header_bg_color {
    background-color: #00A388;
}

.my_custom_banner_left {
    margin-left: 50px;
    padding-bottom: 0px;
}

Answer 1

简单地定义横幅的高度:

.my_title_banner {
    height:400px;
    font-size: 40px;
    font-weight: bold;
    color: white;
    margin-bottom: 0px;
}

或者，如果您希望横幅具有可变高度，您可以确保图像与横幅底部齐平，如下所示:

.your-banner {
    position:relative
}

.image-inside-banner {
    position:absolute;
    bottom:0
}