The purpose of the two div tags?

Tell us what’s happening:

This question isn’t about what its asking me to do.
I am more confused about the divs.
Why are there two different divs surrounding everything.
.cardContenct is the child of .FullCard? Both have padding set.

I am confused on the difference of the paddings for both and why it would be done like this. Does my question make sense?

Thank you

Your code so far


<style>
h4 {

}
p {

}
.links {
  margin-right: 20px;

}
.fullCard {
  border: 1px solid #ccc;
  border-radius: 5px;
  margin: 10px 5px;
  padding: 4px;
}
.cardContent {
  padding: 10px;
}
</style>
<div class="fullCard">
<div class="cardContent">
  <div class="cardText">
    <h4>Google</h4>
    <p>Google was founded by Larry Page and Sergey Brin while they were Ph.D. students at Stanford University.</p>
  </div>
  <div class="cardLinks">
    <a href="https://en.wikipedia.org/wiki/Larry_Page" target="_blank" class="links">Larry Page</a>
    <a href="https://en.wikipedia.org/wiki/Sergey_Brin" target="_blank" class="links">Sergey Brin</a>
  </div>
</div>
</div>

Your browser information:

User Agent is: Mozilla/5.0 (X11; Ubuntu; Linux x86_64; rv:75.0) Gecko/20100101 Firefox/75.0.

Challenge: Create Visual Balance Using the text-align Property

Link to the challenge:

In isolation I personally would combine those two classes into one and get rid of one level of divs, because here it really is not needed.

This may come from CSS libraries like Bootstrap that required for stuff to be wrapped in utility classes like this:

<div class="container">
  <div class="row">
    <div class="col-xs-12">
      <div>Finally my stuff</div>
    </div>
  </div>
</div>

But that is just my guess.

1 Like