Creating a html-form and got problems with the width-CodePudding

i want to create a simple survey-form and got problems with the width. The textfield is about 10px larger then the survey-form-box i created. I dont get it i set it to width: 100% in the css-file. Where is the problem?

.survey-form {
  width: 50%;
  margin-left: 30%;
  margin-right: 30%;
  background: blue;
}

.form-control {
  width: 100%;
}

<html>

<head>
  <meta charset="utf-8">
  <title>Bin</title>
</head>

<body>
  <form class="survey-form">
    <label for="name">Name</label>
    <input class="name form-control" type="text" placeholder="Name" />
  </form>
</body>
<html>

The width from the textfield is not the same as the blue box

CodePudding user response：

You should assign box-sizing property in .form-control

.form-control {
      width: 100%;
      box-sizing: border-box;
}

FYI

CodePudding user response：

you can use box-sizing

.survey-form {
    width: 50%;
    margin-left: 30%;
    margin-right: 30%;
    background: blue;
    position:relative;
}

.form-control{
  display:block;
  width:100%;
  box-sizing: border-box;
}

<html>
    <head>
        <meta charset="utf-8">
        <title>Bin</title>
    </head>
    
    <body>
        <form class="survey-form">
            <label for="name">Name</label>
            <input class="name form-control" type="text" placeholder="Name"/>
        </form>
    </body>
<html>