CODEWITHSUNDEEP
htmlcss
Tomas Hughes
Tomas Hughes

Reputation: 37

Adding <p> to a <div> inside a <div> container

I'm trying add some text to a child div. When I include a <p> inside the div the whole thing screws up.

Why does the <p> element cause what is depicted in the image below?

Before Adding the Text:

Before adding the text

After Adding the Text:

After adding the text

.containerDonation {
  padding: 0px;
  margin: 0px;
  height: 350px;
  text-align: center;
  border: 4px solid black;
}
.donations {
  display: inline-block;
  width: 90%;
  height: 300px;
  margin-top: 25px;
  padding: 0px;
  overflow: hidden;
  text-align: center;
  border: 4px solid red;
}
.donateCircle {
  display: inline-block;
  width: 22%;
  height: 275px;
  border: 4px solid #99CCFF;
  border-radius: 250px;
  margin: 10px 40px 0px 40px;
}
.donate {
  margin: 50px 0px 0px 50px;
  padding: 0px;
  border: 1px solid red;
  height: 175px;
  width: 175px;
}
.donate p {
  margin: 0px;
  padding: 0px;
}
<section class="containerDonation">
  <div class="donations">
    <div class="donateCircle">
      <div class="donate">
        <p>Small Donation</p>
      </div>
    </div>
    <div class="donateCircle">
      <div class="donate">
        <p></p>
      </div>
    </div>
    <div class="donateCircle">
      <div class="donate">
        <p></p>
      </div>
    </div>
  </div>
</section>

Upvotes: 1

Views: 93

Answers (2)

j08691
j08691

Reputation: 207901

The default vertical alignment of inline elements is baseline, so you need to change that to top in order for them to all be top aligned. Add vertical-align:top to .donateCircle:

.containerDonation {
  padding: 0px;
  margin: 0px;
  height: 350px;
  text-align: center;
  border: 4px solid black;
}
.donations {
  display: inline-block;
  width: 90%;
  height: 300px;
  margin-top: 25px;
  padding: 0px;
  overflow: hidden;
  text-align: center;
  border: 4px solid red;
}
.donateCircle {
  display: inline-block;
  width: 22%;
  height: 275px;
  border: 4px solid #99CCFF;
  border-radius: 250px;
  margin: 10px 40px 0px 40px;
  vertical-align:top;
}
.donate {
  margin: 50px 0px 0px 50px;
  padding: 0px;
  border: 1px solid red;
  height: 175px;
  width: 175px;
}
.donate p {
  margin: 0px;
  padding: 0px;
}
<section class="containerDonation">
  <div class="donations">
    <div class="donateCircle">
      <div class="donate">
        <p>Small Donation</p>
      </div>
    </div>
    <div class="donateCircle">
      <div class="donate">
        <p></p>
      </div>
    </div>
    <div class="donateCircle">
      <div class="donate">
        <p></p>
      </div>
    </div>
  </div>
</section>

Upvotes: 1

War10ck
War10ck

Reputation: 12508

You need to vertical-align your .donateCircle divs:

.containerDonation {
    padding: 0px;
    margin: 0px;
    height: 350px;
    text-align: center;
    border: 4px solid black;
}

.donations {
    display: inline-block;
    width: 90%;
    height: 300px;
    margin-top: 25px;
    padding: 0px;
    overflow: hidden;
    text-align: center;
    border: 4px solid red;
}

.donateCircle {
    display: inline-block;
    width: 22%;
    height: 275px;
    border: 4px solid #99CCFF;
    border-radius: 250px;
    margin: 10px 40px 0px 40px;
    vertical-align: top;
}

.donate {
    margin: 50px 0px 0px 50px;
    padding: 0px;
    border: 1px solid red;
    height: 175px;
    width: 175px;
}

.donate p {
    margin: 0px;
    padding: 0px;
}
<section class="containerDonation">
    <div class="donations">
        <div class="donateCircle">
            <div class="donate">
                <p>Small Donation</p>
            </div>
        </div>
        <div class="donateCircle">
            <div class="donate">
                <p></p>
            </div>
        </div>
        <div class="donateCircle">
            <div class="donate">
                <p></p>
            </div>
        </div>
    </div>
</section>

Note: that due to the width values using percentages, and the snippet being run in an <iframe> the content looks off. The vertical-align principle applies non the less though and can be viewed using the snippets Full Screen option or by visiting the full screen link.

Upvotes: 1

Related Questions