EspañolDeutschFrançaisItalianoPortuguêsРусскийΕλληνικά日本語中文(简体)हिन्दी; हिंदीالعربية
Configura come lingua predefinita
Domande di PF - Cose da fare

Come prevenire un aumento di dimensione elemento HTML aggiungendo un imbottitura

Programmazione CSS  
 
Come prevenire un aumento di dimensione elemento HTML aggiungendo un imbottitura

Quando lavoriamo con HTML e fogli di stile CSS Ci sono volte che il comportamento gli elementi della pagina che stiamo progettando è lontano di che cosa si potrebbe pensare che sarebbe la cosa giusta. In questi casi, Dobbiamo fare immersioni Internet di informarsi e informarsi sui loro fino a quando i possibili soluzione che può risolvere il nostro problema.

In questo caso, Parliamo del comportamento che hanno il Elementi HTML Quando si assegna un imbottitura. Si supponga che un elemento div con uno altezza e larghezza predefinita, in pixel o in percentuale, che hanno dato un bordo per visualizzare meglio le sue dimensioni:

Come si può vedere nella Scheda CSS, Questo contenitore ha una Larghezza di un 75% e uno altezza di 100 pixel.

Ora, Ti assegneremo un imbottitura di 20 pixel per ogni lato:

Possiamo vedere che, ora, il contenitore presenta un imbottitura rendere il testo per separare i bordi, ma in più, il dimensione del contenitore è aumentata, vale a dire, ora ha un'altezza e una larghezza di 40 pixel più a causa della imbottitura assegnato a ciascuno dei suoi lati.

Per evitare questo, Useremo la proprietà casella-dimensionamento del contenitore, facendo così il dimensioni dello stesso includono anche il vostro imbottitura. Per fare questo, Basta assegnare il valore casella-dimensionamento: casella di bordo nel CSS, e otteniamo il seguente risultato:

In questo modo, il contenitore manterrà il imbottitura assegnate, di 20 pixel, senza aumentare loro dimensioni definito in precedenza.

Quello che abbiamo appena visto, si verifica anche con gli elementi ingresso Forme, Che cosa significa, per abbinarli al design desiderato, Dovremmo avere un po' di abilità.

Ci accingiamo a Aggiungere un elemento ingresso di digitare il testo per la codice Abbiamo già, e si configurerà il ingresso con uno Larghezza della 100% del contenitore padre, e un imbottitura di 5 pixel per quelli i lati superiore e inferiore, e 10 pixel per destra e sinistra.

Che succede? Al nostro nuovo elemento ingresso delle dimensioni del contenitore padre, anche dopo aver impostato una larghezza di un 100%. Come risolvere?? Perché simile a come abbiamo fatto con il suo contenitore, Ci accingiamo a assegnare Proprietà. casella-dimensionamento con il valore casella di bordo:

Voilà! Qui vediamo come utilizzando il Proprietà. casella-dimensionamento e assegnandogli la valore casella di bordo, Possiamo fare che la Elementi HTML del nostro sito Web è si adatta perfettamente, in dimensioni, a quei valori che sono stati assegnati, evitando che questi crescere Quando assegnare una sorta di imbottitura per lo stesso.

Lasciaci un commento o accedere allaCose da fare
Share on Facebook Tweet about this on Twitter Share on Google+ Pin on Pinterest Share on Reddit Share on VK Share on StumbleUpon Share on Tumblr Share on LinkedIn Email this to someone Print this page