CODEWITHSUNDEEP
htmlcss
jzeef
jzeef

Reputation: 729

html button has excess whitespace above due to text content

So I have the following code below.

.innerDiv1 {
  display: inline-block;
  width: 45%;
  border-right: 1px solid;
  padding-right: 5px
}

.innerDiv2 {
  display: inline-block;
  width: 45%;
  padding-left: 5px;
}

.inner2 {
  border: 1px solid black;
  
}

.rect {
  width: 0%;
  height: 20px;
  background-color: #4CAF50;
  text-align: center;
  line-height: 30px;
  color: black;
  font-size: 12;
}

.sendreceiveBtn {
  height: 25px;
  width: 100%;
  font-size: 12px;
  max-height: 25px;
  
}
<div>
  <div class="inlineItems" id="progBtnBar">
    <div class="innerDiv1">
      <div class="inner2">
        <div id="myProgress">
          <div class="rect">0%</div>
        </div>
      </div>
    </div>
    <div class="innerDiv2">
      <button class=sendreceiveBtn>Transmit</button>
    </div>
  </div>
</div>

I need to line up a button vertically with another div, with both as inline-block inside another div, so they end up next to eachother, preferably the exact same size. However, something about the button is pushing it down a bit. Nothing I have done so far has been able to change this EXCEPT for increasing the font of the text in the button. What is making this space, and how can I get these to line up?

Upvotes: 0

Views: 1238

Answers (3)

Sagar B
Sagar B

Reputation: 204

Replace Your existing CSS with below:

    .innerDiv1 {   display: table-cell;   width: 45%;   border-right: 1px solid;   padding-right: 5px; vertical-align: middle; }

.innerDiv2 {   display: table-cell;   width: 45%;   padding-left: 5px; vertical-align: middle; }

.inner2 {   border: 1px solid black;    }

.rect {   width: 0%;   height: 20px;   background-color: #4CAF50;   text-align: center;   line-height: 30px;   color: black;   font-size: 12; }

.sendreceiveBtn {  min-height: 25px; width: 100%; font-size: 12px; height: auto;    }

#progBtnBar{
    display: table;
    width: 100%;
    height: auto; }

Thats it. It will resolve the issue.

Upvotes: 1

George Beresford
George Beresford

Reputation: 13

Vertical align allows multiple siblings to share the same vertical position.

.innerDiv1 {
  display: inline-block;
  width: 45%;
  border-right: 1px solid;
  padding-right: 5px
  vertical-align: middle;
}

.innerDiv2 {
  display: inline-block;
  width: 45%;
  padding-left: 5px;
  vertical-align: middle;
}

You can see a working example in the following jsfiddle: https://jsfiddle.net/gkotxdt7/

Upvotes: 1

bprdev
bprdev

Reputation: 1048

this is the culprit:

.rect {
  line-height: 30px;
}

Upvotes: 3

Related Questions