Padding and text-alignment

HTML-CSS
1

Tell us what’s happening:
I’m having a hard time understanding the padding property so I decided to play with it. I tried the text-align property to see what happens in the padding. I used “justify” then the text is aligned to the left. Can somebody help me understand why this is happening?

Your code so far


<style>
h4 {
  text-align: justify;
  background-color: rgba(45, 45, 45, 0.1);
  padding: 10px;

}
p {
  text-align: justify;
}
.links {
  text-align: left;
  color: black;
}
.fullCard {
  width: 245px;
  border: 1px solid #ccc;
  border-radius: 5px;
  margin: 10px 5px;
  padding: 4px;
}
.cardContent {
  padding: 10px;
}
.cardText {
  margin-bottom: 30px;
}
</style>
<div class="fullCard">
<div class="cardContent">
  <div class="cardText">
    <h4>Alphabet</h4>
    <hr>
    <p><em>Google was founded by Larry Page and Sergey Brin while they were <u>Ph.D. students</u> at <strong>Stanford University</strong>.</em></p>
  </div>
  <div class="cardLinks">
    <a href="https://en.wikipedia.org/wiki/Larry_Page" target="_blank" class="links">Larry Page</a><br><br>
    <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 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/84.0.4147.105 Safari/537.36.

Challenge: Adjust the Size of a Header Versus a Paragraph Tag

Link to the challenge:

2

I believe a definition of justify could work out…

justify – Content spaces out such that as many blocks fit onto one line as possible and the first word on that line is along the left edge and the last word is along the right edge. Source

Is it cleared up now?

But by the way, excellent method of finding out. Now you didn’t know why, but you did now how it works.

Edit

Side comment: imagine words like wagons of a train. Each line in the page is filled up with wagons (words). At some point you can’t get another one in. Then the ‘word placement algorithm’ changes the space between the wagons, to evenly fill up this first line, and moves to the next line. That’s why justifying sometimes looks weird (particularly with long words in small screens. I wouldnt write justified german :upside_down_face:). Though sometimes anything looks weird.

You can use a similar reasoning for the other alignments.

3

Thank you! When I added more words (many enough to make a few sentences) the text became justified.