Html Question posted in
Some basic documentation can be found here.

Html – How to create a space between input-field border and text content

How can I for the sake of a better overview and style, create a space between the text that i type in in the input-element and the border line from the input field? i try to have there a space when one begins to type in stuff.

.formDiv {
  height: 40px;
}

.leftColumnHalf {
  width: 530px;
}

.rightColumnHalf {
  width: 460px;
}

.myInputs {
  border: 1px solid black;
  width: 100%;
  height: 100%;
  padding: 0;
}
<div style="display: flex; gap: 25px;">
  <div class="leftSmallTitlesBold smallTitlesBold">Datum</div>
  <div class="smallTitlesBold">ZUSTÄNDIGER MITARBEITER</div>
</div>

<div style="display: flex; gap: 25px; margin-bottom: 15px;">
  <div class="leftColumnHalf formDiv"><input id="datum" class="myInputs"/></div>
  <div class="rightColumnHalf formDiv"><input id="mitarbeiter" class="myInputs" /></div>
</div>
Tags:

2

Answers


  1. 0

    Give the padding for the input tag as per you need the space between border and text and use box-sizing:border-box for the show the box properly.

    Try to avoid using inline styling. Add the class and give to CSS their respective class.

    * {
    box-sizing: border-box;
}

.titleHeading,
.inputBox {
    display: flex;
    gap: 25px;
}

.inputBox {
    margin-bottom: 15px;
}

.formDiv {
    height: 40px;
}

.leftColumnHalf {
    width: 530px;
}

.rightColumnHalf {
    width: 460px;
}

.myInputs {
    border: 1px solid black;
    width: 100%;
    height: 100%;
    padding: 0 10px;
}
    <div class="titleHeading">
    <div class="leftSmallTitlesBold smallTitlesBold">Datum</div>
    <div class="smallTitlesBold">ZUSTÄNDIGER MITARBEITER</div>
</div>
<div class="inputBox">
    <div class="leftColumnHalf formDiv"><input id="datum" class="myInputs" /></div>
    <div class="rightColumnHalf formDiv"><input id="mitarbeiter" class="myInputs" /></div>
</div>
    Login or Signup to reply.
  2. 0

    Basically in your myInputs class you give padding 0, 10px. It’s mean you only give 10px padding to left and right side and padding between top and bottom is zero. you need to correct your padding with 5px, 10px.

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search