html - 添加时标记到 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

I'll post the solution also here with 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;
}