當添加一個 <p> 標記div元素，邊距變為父div的1/2

Question

我正在嘗試對齊-圖標| text |的行 -圖標|文本| -圖標|文本| 當div彼此相鄰時似乎還可以，並且它們似乎也可以對齊。 但是當我添加一個

子div之間的標記，它的行為確實很奇怪，並將其邊距設置為父div的1/2。

這是我的HTML外觀：

<section id="subber">
            <span class="subber-element-icon">
            </span>
            <div class="subber-element">
                <p>hafjadljla;j kfaj lfjadklj;af kl;aj a</p>
            </div>
</section>

這就是CSS的樣子：

#subber {
height: 10%;
width: 100%;
}

.subber-element{
height: 100%;
display: inline-block;
border: 1px black solid;
width: 30%;
}

.subber-element p{
font-family: vegur regular;
color: grey;
display: inline;
margin: 0;
padding: 0;
}

.subber-element-icon{
height: 100%;
width: 10%;
border: 1px black solid;
display: inline-block;   
}

希望你們中的一個可以幫忙！

Answer 1

我還將在此處將演示與DEMO一起發布

HTML

<div id="subber">
        <img class="icon">
        </img>
        <section class="text">
              <p>PROVA PROVA PROVA CON DEL TESTO</p>
        </section>
  </div>
  <div id="subber">
        <div class="icon">
        </div>
        <section class="text">
            <p><span>PROVA PROVA PROVA CON DEL TESTO TESTO TESTO</span></p>
        </section>
  </div>
  <div id="subber">
        <div class="icon">
        </div>
        <section class="text">
            <p>PROVA PROVA PROVA CON DEL TESTO TESTO TESTO</p>
        </section>
  </div>

CSS

.icon{
height:50px;
width:50px;
border:1px solid black;
float:left;
}
.text{
border:1px solid black;
float:left;
height:50px;
max-width:300px;
color:red;
}
.text p{
height:50px;
padding:0px;
}

#subber{
float:left;
width:400px;
height:50px;
}