Come evitare che l'elemento figlio riempito trabocchi il suo genitore?

Question

Come si può vedere da this example, il input sembra "overflow" suo padre div. Mi piacerebbe aggiungere padding allo input senza farlo traboccare suo padre.

Mi piacerebbe conoscere la soluzione/soluzione migliore per ogni browser (inclusi IE, Firefox, Chrome, ecc.).

Answer 1

potete vedere this answer, ma se si don' t come esso, è possibile utilizzare box-sizing CSS3 proprietà come questa:

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

Live jsFiddle example

Answer 2

Non specificare la larghezza del div interno come 100%. Un div si adatta automaticamente alla larghezza del suo contenitore genitore. Demo

Answer 3

Sembra che l'input sia all'interno del div ma si trova nell'angolo in alto a sinistra. Poiché l'input occupa il 100% della larghezza del div, oscura lo sfondo rosso del div. Il div è più lungo in modo che sporga dal fondo, facendo sembrare che l'input sia on-top. Procedere come segue:

• Applicare l'imbottitura al CSS dei div esterni non casella Input.
  Si potrebbe applicare un margine all'ingresso se si desidera, ma penso che il riempimento di div divisi meglio.
  • rendere la casella di input meno largo del div (< 100%)

Answer 4

imbottitura aggiunge alla larghezza del vostro oggetto. Un'opzione potrebbe essere quella di rimuovere il riempimento sinistro/destro dall'input e utilizzare solo il rientro del testo, sebbene ciò rimuova il riempimento corretto.

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

In alternativa, invece di utilizzare hardcoded pixel-larghezze per la vostra imbottitura, è possibile utilizzare le percentuali, e sottrarre quel valore dalla larghezza:

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