CODEWITHSUNDEEP
htmlcss
User
User

Reputation: 171

when adding a <p> tag to div element, margin becomes 1/2 of parent div

I'm trying to align a row of - icon |text| - icon |text| - icon |text| It seems okay when just having the div's next to eachother and they seem to align proper as well. But when I add a

tag between the child div, it behaves really weird and set's its margin to 1/2 of the parent div.

This is what my HTML looks like: 

<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>

And this is whay the CSS looks like: 

#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;   
}

Hopefully one of you guys can help out!

Upvotes: 1

Views: 211

Answers (1)

rpasianotto
rpasianotto

Reputation: 1413

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;
}

Upvotes: 2

Related Questions