HTML - CSS remove padding caused by font-size-CodePudding

in the following code, I have a challenge and need your help.

There are 2 input fields next to each other. The 2nd one on the right hand side (green) is positioned bit higher. It seems that there is padding or margin set on the bottom of the input field. But I can't remove it.

When I set the font-size of the 2nd input field same as 1st input field, the issue does not happen.

But the 2nd input field has to be bigger.

<!doctype html>               
<html lang="en">            
<head>
<style>

#curSelButton {
    width: 60px;
    height: 40px;

    font-size:15px;
    text-align: center;
    background-color: white;
    border-radius: 2px;

    margin:0px;
    padding:0px;
  }

#curSel {
    width: 60px;
    height: 40px;
    
    text-align: center;
    
    font-size:25px;

    background-color: rgb(0, 255, 0);
    font-weight: bold;    

    margin:0px;
    padding:0px;

    border-width: thin;   
    
  }
</style>

</head>

<body  >
    <table >     
        <tr >            
            <td >
                <input type="text" id="curSelButton"  readonly value="shuffle" > 
                <input type="text" id="curSel" value="ABC" readonly >                 
            </td>
        </tr>  
</body>
</html>

How can I position both input fields vertically same without changing the font-site?

Many Thanks, BM

CodePudding user response：

Add vertical-align: top; to both. By default they are aligned at the baselines of their texts.

#curSelButton {
  width: 60px;
  height: 40px;
  font-size: 15px;
  text-align: center;
  background-color: white;
  border-radius: 2px;
  margin: 0px;
  padding: 0px;
}

#curSel {
  width: 60px;
  height: 40px;
  text-align: center;
  font-size: 25px;
  background-color: rgb(0, 255, 0);
  font-weight: bold;
  margin: 0px;
  padding: 0px;
  border-width: thin;
}

#curSelButton,
#curSel {
  vertical-align: top;
}

<table>
  <tr>
    <td>
      <input type="text" id="curSelButton" readonly value="shuffle">
      <input type="text" id="curSel" value="ABC" readonly>
    </td>
  </tr>
</table>

CodePudding user response：

You can put another td Element inside your tr and put your Button with class „curSel“ in it.

<tr >            
    <td >
       <input type="text" id="curSelButton"  readonly value="shuffle" > 
    </td>
    <td>
       <input type="text" id="curSel" value="ABC" readonly > 
    </td>
</tr>

CodePudding user response：

Use div insted of table and use CSS property float:left to align

<!doctype html>               
<html lang="en">            
<head>
<style>

  #curSelButton {
    width: 60px;
    height: 40px;
    font-size:15px;
    text-align: center;
    background-color: white;
    border-radius: 2px;
    margin:0px;
    padding:0px;
 
    float:left;
 }

  #curSel {
    width: 60px;
    height: 40px; 
    text-align: center; 
    font-size:25px;
    background-color: rgb(0, 255, 0);
    font-weight: bold;    
    margin-left:3px;
    padding:0px;   
  
    float:left;
  }
</style>

</head>

<body  >
  

  <div>
    <input type="text"  id="curSelButton"  readonly value="shuffle" > 
  </div>

  <div>
    <input type="text" id="curSel" value="ABC" readonly >                 
  </div>

</body>
</html>

CodePudding user response：

Add vertical-align: middle to both the input fields.

<!doctype html>               
<html lang="en">            
<head>
<style>

#curSelButton {
    font-size:15px;
    background-color: white;
    border-radius: 2px;
  }

#curSel {                
    font-size:25px;
    background-color: rgb(0, 255, 0);
    font-weight: bold;    
    border-width: thin;           
  }

 #curSelButton, #curSel {
    vertical-align: middle;
    width: 60px;
    height: 40px;
    text-align: center;
    margin:0px;
    padding:0px;
 }

</style>

</head>

<body  >
    <table >     
        <tr >            
            <td >
                <input type="text" id="curSelButton"  readonly value="shuffle" > 
                <input type="text" id="curSel" value="ABC" readonly >                 
            </td>
        </tr>  
</body>
</html>