我如何才能使字体很棒，可以占用其父容器的整个区域

Question

As you can see the thumbs are over its parent area. The UI layout is not acceptable.

The following is the expected result. I tried to put margin-bottom with a negative number, Or tried to make them in FLEX layout. None of them works. Any ideas?

Parent container

#vote-buttons-section .iconic-button#upvote {
  background: #7f7f7f !important;
  width: 75px;
  height: 55px; }
#vote-buttons-section .iconic-button#downvote {
  background: #7f7f7f;
  height: 55px;
  width: 75px; }

Font-awesome icons appear on the BEFORE attribute

.ui-button.iconic-button.iconic-button-upvote:before,
.ui-button.iconic-button.iconic-button-upvote.ui-state-hover:before,
.ui-button.iconic-button.iconic-button-upvote.ui-state-focus:before {
  font-family: FontAwesome;
  content: "\f087";
  font-size: 55px;
  color: white;
  vertical-align: middle;
  line-height: 55px;
  }

.ui-button.iconic-button.iconic-button-downvote:before,
.ui-button.iconic-button.iconic-button-downvote.ui-state-hover:before,
.ui-button.iconic-button.iconic-button-downvote.ui-state-focus:before {
  font-family: FontAwesome;
  content: "\f088";
  font-size: 64px;
  color: white;
  vertical-align: middle; }

Answer 1

Seems like the heights of the containers are 55px . What you can do is to add the rule line-height: 55px; to the part that's handling the icons. It seems like you should add it to the selectors

.ui-button.iconic-button.iconic-button-upvote:before,
.ui-button.iconic-button.iconic-button-upvote.ui-state-hover:before,
.ui-button.iconic-button.iconic-button-upvote.ui-state-focus:before

Then it should be centered. You can adjust the font-size if you want, as long as the line-height is correct, it will be centered.

Answer 2

What I would do, is to add the height: inherit; and some padding like this:

#vote-buttons-section .iconic-button#upvote {
   height: inherit;
   padding: 10px 10px;
}

If it doesn't work, add the !important to the CSS properties, like this:

#vote-buttons-section .iconic-button#upvote {
   height: inherit !important;
   padding: 10px 10px !important;
}

Hope this helps.

EDIT: I didn't see that you solved the problem by a user that gave the answer before me. I'm glad that you fixed your issue with user Gustaf Gunér .