Question

如您在代码段中所见，<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

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

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

2 个答案: