Jak zapobiegać przepełnieniu elementu potomnego przez jego rodzica?

Question

Jak widać z , wydaje się, że input "przepełnia" swojego rodzica div. Chciałbym dodać dopełnienie do input, nie powodując przepełnienia rodzica.

Chciałbym poznać najlepsze rozwiązanie/obejście dla każdej przeglądarki (w tym IE, Firefox, Chrome itp.).

Answer 1

widać this answer, ale jeśli don” t podoba, można użyć box-sizing CSS3 własność tak:

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

Live jsFiddle example

Answer 2

Nie określaj szerokości wewnętrznego elementu div jako 100%. Element div automatycznie dopasuje szerokość swojego kontenera nadrzędnego. Demo

Answer 3

Wygląda na to, że wejście znajduje się wewnątrz elementu div, ale znajduje się w lewym górnym rogu. Ponieważ wejście zajmuje 100% szerokości div, zasłania czerwone tło elementu div. Element div jest dłuższy, więc wystaje z dołu, przez co wydaje się, że dane wejściowe znajdują się na górze. Wykonaj następujące czynności:

• Zastosuj dopełnienie do CSS z zewnątrz nie div polu tekstowym.
  Można zastosować margines do danych wejściowych, jeśli chcesz, ale myślę, że dopełnienie zawierający element div jest lepszy.
  • Wykorzystaj pole wprowadzania węższa niż div (< 100%)

Answer 4

Dopełnienie dodaje do szerokości Twojego obiektu. Jedną z opcji jest usunięcie lewego/prawego marginesu z wejścia i użycie wcięcia tekstowego, chociaż usuwa to prawe wypełnienie.

.inside{ 
    background: blue; 
    border: none; 
    padding-bottom: 10px; 
    padding-top: 10px; 
    text-indent: 10px; 
    width: 100%; 
} 

Alternatywnie, zamiast używać jawnie wpisanej pikseli szerokości do wypełnienia, można użyć procentów, i odjąć tę wartość od szerokości:

.inside{ 
    padding: 3%; 
    width: 94%; 
}