EspañolDeutschFrançaisItalianoPortuguêsРусскийΕλληνικά日本語中文(简体)हिन्दी; हिंदीالعربية
Als Standardsprache festlegen
PF-Fragen - Forum

Wie ein HTML-Element Größenzunahme zu verhindern, indem man eine Polsterung

CSS-Programmierung  
 
Wie ein HTML-Element Größenzunahme zu verhindern, indem man eine Polsterung

Wenn wir mit arbeiten HTML und Style-sheets CSS Es gibt Zeiten, die die Verhalten die Elemente der Seite, die wir entwerfen ist der Abstand was Sie vielleicht denken würde es das richtige sein. In diesen Fällen, Wir haben, Tauchen Sie ein Internet zu erkundigen und informieren Sie sich über sie, bis die möglich Lösung Das kann unser Problem lösen..

In diesem Fall, Reden wir über die Verhalten die haben die HTML-Elemente Beim Zuweisen einer Polsterung. Angenommen Sie, Sie verfügen über ein element div mit einem Breite und Höhe Standard, entweder in Pixel oder als Prozentsatz, die Kante zur besseren Darstellung seiner Dimensionen gegeben:

Wie Sie, in sehen können der Registerkarte "CSS", Dieser Container hat eine Breite von einer 75% und eine Höhe der 100 Pixel.

Jetzt, Werden wir weisen Sie ein Polsterung der 20 Pixel auf jeder Seite:

Wir können sehen, dass, jetzt, die Container stellt ein Polsterung damit der Text um die Kanten zu trennen, aber darüber hinaus, die Container hat sich vergrößert, d. h., jetzt hat eine Höhe und Breite des 40 mehr Pixel Aufgrund der Polsterung zu jedem seiner Seiten zugewiesen.

Um dies zu vermeiden, Wir werden zur Nutzung des Eigentums Box-sizing Container, tun, so dass die Größe der gleichen enthalten auch Ihre Polsterung. Dazu, Wir weisen Sie einfach den Wert Box-sizing: Border-box in der CSS, und wir erhalten folgendes Ergebnis:

Auf diese Weise, der container halten die Polsterung zugewiesen, der 20 Pixel, keine Erhöhung Ihre Abmessungen zuvor definierten.

Was wir gerade gesehen haben, auch tritt mit den Elementen Eingang Formen, Was ist das, Sie passen zu dem gewünschten design, Wir sollten ein wenig haben. Geschicklichkeit.

Wir gehen zum Hinzufügen ein element Eingang der Text eingeben zu den Code Wir haben bereits, und wir gehen sagte zu konfigurieren Eingang mit einem Breite von der 100% aus dem übergeordneten container, und eine Polsterung der 5 Pixel für den oberen und unteren Seiten, und 10 Pixel für rechts und links.

Was passiert? Auf unserer neuen Element Eingang Es kommt aus den Dimensionen aus dem übergeordneten container, sogar eine breite von Setzung einer 100%. Wie es zu beheben?? Als ein ebenso wie bei seinem Container, Wir gehen zum weisen Sie ihn Immobilien Box-sizing mit dem Wert Border-box:

Voila! Hier sehen wir als mit Hilfe die Eigenschaft Box-sizing und die Zuordnung der Wert Border-box, Wir können dies die HTML-Elemente Unsere Website ist passen perfekt, in Größe, die Werte, die wir zugeordnet haben, Vermeidung von dass diese wachsen Wann zuweisen irgendeine Art von Polsterung zu Ihnen.

Lassen Sie uns einen Kommentar oder geben Sie dieForum
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
Markierungen: , ,