为什么 <p> 元素文本在自身上重叠

Question

正如您在 sn-p 中看到的那样，<p> 元素由于某种原因重叠在自身之上，并且没有在应该的时候进入新行。我不确定是什么原因造成的。我认为它会起作用的方式是 <p> 元素的父元素的高度会根据 p 元素的高度增加。

*, *:after, *:before {
    margin: 0;
    padding: 0;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    text-decoration: none;
    list-style-type: none;
}
body {
    background-color: #F7F4EB;
    line-height: 1.8rem;
    font-family: "Source Sans Pro", Helvetica, Arial, sans-serif;
}
.wrapper {
    width: 70%;
    margin: 0 auto;
    height: 100%;
}
.gallery-container {
    font-size: 0px;
    margin-bottom: 15px;
}
.gallery-element {
    text-align: center;
    padding: 0px 20px 0px 20px;
    display: inline-block;
    width: 33.33333%;
}
.responsive {
    width: 100%;
    height: auto;
}
.information {
    font-size: 14px;
}
.company-info {
    display: flex;
}
.who-us, .about-us {
    flex: 1;
}

<section>
            <div class="gallery-container">
                <div class="gallery-element">
                    <img class='responsive' src="https://i.imgur.com/wMkl3hm.jpg" alt="">
                    <p class='information'>
                        We can install a variety of different washing machines including front loading machines, top loading machines and also washer dryer machines.
                        Our installation service include all safety checks to ensure there is no leak potential.
                        We provide a dishwasher installation service that ensures the machine is working efficiently.
                        We check that the electrical and plumbing connections in the house are safe and make certain there will be no potential for leaks.
                    </p>
                </div>
                <div class="gallery-element">
                    <img class='responsive' src="https://i.imgur.com/wMkl3hm.jpg" alt="">
                    <p class='information'>
                        We can install a variety of different washing machines including front loading machines, top loading machines and also washer dryl and plumbing connections in the house are safe and make certain there will be no potential for leaks.
                    </p>
                </div>
                                <div class="gallery-element">
                <img class='responsive' src="https://i.imgur.com/wMkl3hm.jpg" alt="">
                <p class='information'>
                    We can install a variety of different washing machines including front loading machines, top loading machines and also washer dryer machines.
                    Our installation service include all safety checks to ensure there is no leak potential.
                    We provide a dishwasher installation service that ensures the machine is working efficiently.
                    We check that the electrical and plumbing connections in the house are safe and make certain there will be no potential for leaks.
                </p>
            </div>
                            <div class="gallery-element">
                <img class='responsive' src="https://i.imgur.com/wMkl3hm.jpg" alt="">
                <p class='information'>
                    We can install a variety of different washing machines including front loading machines, top loading machines and also washer dryer machines.
                    Our installation service include all safety checks to ensure there is no leak potential.
                    We provide a dishwasher installation service that ensures the machine is working efficiently.
                    We check that the electrical and plumbing connections in the house are safe and make certain there will be no potential for leaks.
                </p>
            </div>
            </div>
</section>

Answer 1

似乎从包装 div.gallery-container 上的 0 行高开始。删除该行或更改为正常值，如 1 或 1.4。

*, *:after, *:before {
    margin: 0;
    padding: 0;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    text-decoration: none;
    list-style-type: none;
}
body {
    background-color: #F7F4EB;
    line-height: 1.8rem;
    font-family: "Source Sans Pro", Helvetica, Arial, sans-serif;
}
.wrapper {
    width: 70%;
    margin: 0 auto;
    height: 100%;
}
.gallery-container {
    font-size: 0px;
    /* REMOVED */
    /* line-height: 0; */
    margin-bottom: 15px;
}
.gallery-element {
    text-align: center;
    padding: 0px 20px 0px 20px;
    display: inline-block;
    width: 33.33333%;
}
.responsive {
    width: 100%;
    height: auto;
}
.information {
    font-size: 14px;
}
.company-info {
    display: flex;
}
.who-us, .about-us {
    flex: 1;
}

<section>
            <div class="gallery-container">
                <div class="gallery-element">
                    <img class='responsive' src="https://i.imgur.com/wMkl3hm.jpg" alt="">
                    <p class='information'>
                        We can install a variety of different washing machines including front loading machines, top loading machines and also washer dryer machines.
                        Our installation service include all safety checks to ensure there is no leak potential.
                        We provide a dishwasher installation service that ensures the machine is working efficiently.
                        We check that the electrical and plumbing connections in the house are safe and make certain there will be no potential for leaks.
                    </p>
                </div>
            </div>
</section>

Answer 2

从.gallery-container 中删除font-size: 0px; line-height: 0;