Почему область содержимого моего элемента <input>выходит за пределы родительского элемента <span>?

Question

Примечание: Так как я пытался извлечь код из среды WordPress Важная тема, я пока не смог воспроизвести проблему в ее простейшей форме, но в итоге я могу ответить на свой вопросно учтите, что я буду благодарен за любые отзывы и надеюсь, что этот вопрос будет информативным для сообщества.

Моя проблема до сих пор описана ниже:

---

Я пытаюсьчтобы лучше контролировать то, как мой контент отображается на экране, и, похоже, что-то, чего я не понимаю в CSS.Я попытался использовать свойство «box-sizing: border box», которое включает отступы и границы в расчете общей ширины элемента.Я добавил ссылки для отображения состояния элементов ввода и диапазона

Подсветка элемента ввода Chrome Devtool

Область содержимого элемента Span Chrome Devtool

Я предполагаю, что размер ящика не работает, потому что проблема связана с маржой.Мое лучшее предположение заключается в том, что свойство margin-left повлияло на всю область содержимого, выталкивая содержимое за пределы элемента span.Однако я хочу, чтобы элемент input содержался внутри элемента span

Добавление HTML и CSS с благодарностью от Lucien Dubois

* { 
 -webkit-box-sizing: border-box;
 -moz-box-sizing: border-box;
  box-sizing: border-box; }

.contact-fields input, textarea{
  margin-left: 12px;
}
 
.wpcf7-form-control-wrap {
  display: block !important;
  position: relative;
}

div, span, h5, p {
  vertical-align: baseline; 
  font-family: inherit; 
  font-weight: inherit; 
  font-style: inherit; 
  font-size: 100%; 
  outline: 0; 
  padding: 0; 
  margin-right: 0; 
  border: 0
}

h5
{
 font-family:Raleway;
 line-height:16px;
 margin-bottom: 7px;
 color:#444; 
 letter-spacing:0px;
 font-weight:600;
}

.form-label {
  clear: both;
  font-size: 20px
}

h5 {
  vertical-align: baseline; 
  font-style: inherit; 
  outline: 0; 
  padding: 0; 
  margin-top: 0;
  margin-right: 0;
  margin-left: 0;
  border:0
}

.first-name,  .last-name {
    display: inline-block;
    width: 40%;
    margin-right: 9px;
}

.first-name input, .last-name input {
  width: 62%;
}

input {
    margin-bottom: 20px;
    margin-top: 5px;
}

<div class="contact-fields">
  <div class="name-section">
    <div class="first-name">
      <h5 class="form-label"> First Name:</h5>
      <p>      
         <span class="wpcf7-form-control-wrap fname">
           <input type="text" 
                  name="fname" 
                  value="" 
                  size="40" 
                  maxlength="50" 
                  class="wpcf7-form-control wpcf7-text wpcf7-validates-as-required input-field" 
                  aria-required="true" 
                  aria-invalid="false">
        </span>
      </p>
    </div>
    <div class="last-name">
      <h5 class="form-label"> Surname:</h5>
        <p>      
          <span class="wpcf7-form-control-wrap lname">
            <input type="text" 
                   name="lname" 
                   value="" 
                   size="40" 
                   maxlength="50" 
                   class="wpcf7-form-control wpcf7-text wpcf7-validates-as-required input-field" 
                   aria-required="true" 
                   aria-invalid="false"></span>
      </p>
    </div>
  </div>
</div>

Answer 1

вы можете попробовать, добавив min и max свойства для вашего поля ввода

input {
    min-width: 100%;
    max-width: 100%;
}