Adjust the Margin of an Element

Adjust the Margin of an Element
0

Tell us what’s happening:
All good, actually. I was just wondering why we need a .box class. Does it affect the subsequent colored box definitions? Also, does the injected-text class affect the subsequent placement of text in the colored boxes? If so, how come? Where in the code do the colored boxes reference or call the injected text class?

Your code so far


<style>
  .injected-text {
    margin-bottom: -25px;
    text-align: center;
  }

  .box {
    border-style: solid;
    border-color: black;
    border-width: 5px;
    text-align: center;
  }

  .yellow-box {
    background-color: yellow;
    padding: 10px;
  }
  
  .red-box {
    background-color: crimson;
    color: #fff;
    padding: 20px;
    margin: 20px;
  }

  .blue-box {
    background-color: blue;
    color: #fff;
    padding: 20px;
    margin: 10px;
  }
</style>
<h5 class="injected-text">margin</h5>

<div class="box yellow-box">
  <h5 class="box red-box">padding</h5>
  <h5 class="box blue-box">padding</h5>
</div>

Your browser information:

User Agent is: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/76.0.3809.100 Safari/537.36.

Link to the challenge:
https://learn.freecodecamp.org/responsive-web-design/basic-css/adjust-the-margin-of-an-element

Have a look at the HTML portion of the code:

<div class="box yellow-box">
  <h5 class="box red-box">padding</h5>
  <h5 class="box blue-box">padding</h5>
</div>

Notice that we are calling “box” as well as “color-box”. You could send the border for each individual one of these colors, or you can do what is done here and create a class that is going to manage the shared properties. In a code this small it may not make as much sense, but think of this scaled to a 50, or 500, or 5000 page website. You are typically going to want to have a consistent flow of the website and elements that match up with others. Having these types of classes allows you to just call the specified class instead of having to recreate it each time you need to add a new element that also needs those properties.

1 Like