Why is the input cutting the border of the div?-CodePudding

I'm trying to create a visual-only freight calculation area for a school project. But the input is taking the edge off the div as I change the font size of the input and the button.

.box-cep {
  width            : 245px;
  height           : 30px;
  margin-top       : 10px;
  margin-left      : 25px;
  border           : 2px solid black;
  }
.box-cep input {
  width            : 150px;
  height           : 30px;
  border           : none;
  }
.box-cep button {
  width            : 90px;
  height           : 30px;
  border           : none;
  background-color : #FF7518;
  color            : white;
  font-family      : "Century Gothic";
  font-size        : 18px;
  font-weight      : bold;
  }
.cep-txt {
  font-family      : "Century Gothic";
  font-size        : 14px;
  padding-left     : 5px;
  }

<div >
  <label for="">
    <input type="text"  placeholder="Digite seu CEP...">
    <button>Calcular!</button>
    </label>
</div>

Printscreen

CodePudding user response：

It's happened because you have set the box-cep height, and the height of the input is overflow the container. For alternately, you can use max-content height for box-cep. And to make the button horizontaly with the input, you can make the box-cep flex and place the button outside the label. Here is my example, i hope it can help you.

.box-cep {
  width            : 245px;
  height           : fit-content;
  margin-top       : 10px;
  margin-left      : 25px;
  border           : 2px solid black;
  display          : flex;
  align-items      : center;
  }
.box-cep input {
  width            : 150px;
  height           : 30px;
  border           : none;
  }
.box-cep button {
  width            : 90px;
  height           : 32px;
  border           : none;
  background-color : #FF7518;
  color            : white;
  font-family      : "Century Gothic";
  font-size        : 18px;
  font-weight      : bold;
  }
.cep-txt {
  font-family      : "Century Gothic";
  font-size        : 14px;
  padding-left     : 5px;
  }

<div >
  <label for="">
    <input type="text"  placeholder="Digite seu CEP...">
  </label>
  <button>Calcular!</button>
</div>

CodePudding user response：

it happens because you add height : 30px in class .box-cep, if you give height : 100% then it will be normal, and remove height in class .box-cep button

like the example below

.box-cep {
  width            : 245px;
  height           : 100%;
  margin-top       : 10px;
  margin-left      : 25px;
  border           : 2px solid black;
  display          : flex;
  align-items       : "center";
  }
.box-cep input {
  width            : 150px;
  height           : 30px;
  border           : none;
  }
.box-cep button {
  width            : 90px;
  border           : none;
  background-color : #FF7518;
  color            : white;
  font-family      : "Century Gothic";
  font-size        : 18px;
  font-weight      : bold;
  }
.cep-txt {
  font-family      : "Century Gothic";
  font-size        : 14px;
  padding-left     : 5px;
  }

<div >
  <input type="text" name="input"  placeholder="Digite seu CEP...">
  
  <button>Calcular!</button>
</div>

CodePudding user response：

You can use position:relative and height:100% to get the full width inside the container.

.box-cep {
  width            : 245px;
  height           : 30px;
  margin-top       : 10px;
  margin-left      : 25px;
  border           : 2px solid black;
  }
.box-cep input {
  width            : 150px;
  height           : 100%; // Replace 30px with 100%
  position         : relative; // Add position: relative
  border           : none;
  }
.box-cep button {
  width            : 90px;
  height           : 100%; // Here Same, Replace 30px with 100%
  position         : relative; // Add position: relative here too
  border           : none;
  background-color : #FF7518;
  color            : white;
  font-family      : "Century Gothic";
  font-size        : 18px;
  font-weight      : bold;
  }
.cep-txt {
  font-family      : "Century Gothic";
  font-size        : 14px;
  padding-left     : 5px;
  }

Then the button and the input will have the same height. Also add overflow:hidden to the .box-cep div to prevent its contents from overflowing.