Z użyciem box-sizing zmiana marginesu powoduje przesunięcie elementu a nie dostosowanie do szerokości rodzica

Question

Witam!

Nie rozumiem czemu ustawiając tag box-sizing: border-box; i zmieniając margines dla tego elementu nie zmienia się jego szerokość lecz zostaje przesunięty w prawo. W linku poniżej umieszczam opis (label) inputu oraz pole do wyświetlenia ewentualnego błędu. Pola wyświetlane są poprzez tag float. Na rodzica nakładane są tagi clear:both i display: block aby usunąć niepotrzebne działanie float. W tym divie znajduje się również input i to chyba dlatego nie mogę poprawnie ustawić marginesu w pionie dla inputu, ponieważ zmienia się jedynie w dół od elementu.

 https://jsfiddle.net/qr49u11d/

 

Edycja pytania:

  Pierwszy problem rozwiącając dodając style do inputa: <input style="display: block; width: 97%; margin: 0 auto;" type="text" > ponieważ box-sizing nie uwzględnia margin.

 

Answer 1

Witam. box-sizing:border-box uwzględnia tylko obramowanie i dopełnienie ( border i padding).

Usuń margin z inputa i daj padding: 3px; do big-container. Chociaż moim zdaniem html jest przekombinowany. Dał bym fieldset zamiast input-container i ten elament byłby pojemnikiem.

<form>
<fieldset>
      <label>Nazwa:</label>
   <a href="" class="error">błąd!</a>
      <input type="text">
</fieldset>
</form>

fieldset {
width:300px;
border:1px solid #000;
padding: 3px;
}

.error
{
  float: right;
  font-size; 12px;
  color: red;
}

input{
  display: block;
box-sizing:border-box;
width:100%;
clear: both;
}

 

Comments

Tylko w jaki sposób nie używając margin-top odsunę inputa od label ?

---

W moim przykładzie możesz użyć margin-top dla inputa.

---

A dlaczego nie działa to w moim przykładzie ?

Zawsze myślałem że fieldset używa się do oddzielenia dwóch różnych form a nie poszczególnych input'ów w formie. Do tej pory używałem tego tak:

<fieldset>
    <legend>...</legend>

    <form>
         <div class="big-containe">
              <label>Input 1:</label>
              <a class="error"></a> 
              <input type="text">
         </div>

         <div class="big-container">
              <label>Input 2:</label>
              <a class="error"></a> 
              <input type="text">
         </div>
   </form>

 

---

Służy do grupowania kontrolek oraz etykiet (elementów formularza powiązanych tematycznie)

fieldset

---

Nie mówię ,że masz użyć fieldset . Chodzi mi o css.