Padding top and bottom not working with anchor tags

Code Help HTML/CSS/JS
1

Question:
Why can’t padding-left and padding-right? I’ve looked online but nothing seems to work, any help would be appreciated

HTML

  <a href='/pages/game1.html' class='project-game-1'>Character Styler</a>
  </div>

CSS

.project-1{
  display: inline-block;
  background-color: #383838;
  width: 175px;
  height: 175px;
  border-radius: 20px;
  text-align: left;
}

.project-game-1{
  display: block;
  font-family: 'Ubuntu', sans-serif;
  color: white;
  text-decoration: none;
  padding-bottom: 100px;
}
2

You mean you want to add padding to the left and right?

Like this?

.project-game-1{
  display: block;
  font-family: 'Ubuntu', sans-serif;
  color: white;
  text-decoration: none;
  padding-bottom: 100px;
  padding-left: 15px;    /* adjust for what u need */
  padding-right: 15px;   /* adjust for what u need here too */
}
3

Sorry I meant top and bottom padding, accidentally put left and right it the title

4

Well it’s basically the same, you just change the padding

.project-game-1{
  display: block;
  font-family: 'Ubuntu', sans-serif;
  color: white;
  text-decoration: none;
  padding-bottom: 100px;   /* you already added bottom here */
  padding-top: 15px;    /* just add this one here */
}
2 Likes
5

If this is not working be sure that the CSS file is properly linked with your HTML file and remember about the CSS Cascade rule: if there is another rule with the same specificity later in the CSS, it will override your rule.

6

Cascading StyleSheets Cascade rule?

7

Just noticed now hahahaha I meant that the order of CSS rules matter

2 Likes
8

This topic was automatically closed 7 days after the last reply. New replies are no longer allowed.