416 Stimmen

Unterschied zwischen Rand und Füllung?

Was genau ist der Unterschied zwischen Marge y Polsterung in CSS? Es scheint wirklich nicht viel Sinn zu machen. Könnten Sie mir ein Beispiel dafür geben, wo die Unterschiede liegen (und warum es wichtig ist, den Unterschied zu kennen)?

4voto

Ernest Friedman-Hill Punkte 79357

Marge ist der Raum außerhalb der Box; Polsterung ist der Raum im Inneren der Box. Bei einer weißen Füllung ist der Unterschied schwer zu erkennen, aber bei einer farbigen Füllung kann man ihn gut erkennen.

3voto

Bonny Punkte 116

Der Abstand zwischen Inhalt und Rand wird berechnet. Der Rand wird außerhalb des Rahmens berechnet. CSS Box Model

3voto

Bharathiraja Punkte 508

Selbsterklärendes Bild

L - Left, R- Right and T - Top, B - Bottom

enter image description here

3voto

chunkyboy Punkte 31

Margin und padding sind beides Arten von Auffüllungen: ....Eine (margin) geht über den Rand des Elements hinaus, um es von anderen Elementen abzugrenzen, und die andere (padding) geht über den Inhalt des Elements hinaus, um den Inhalt vom Rand des Elements abzugrenzen.

2voto

Rajat Punkte 400

Die Auffüllung ermöglicht es dem Entwickler, den Abstand zwischen dem Text und dem ihn einschließenden Element beizubehalten. Margin ist der Abstand, den das Element zu einem anderen Element des übergeordneten DOM einhält.

Siehe Beispiel:

<head>
<meta http-equiv="Content-Type" content="text/html; charset=UT-8">
    <title>Pseudo Elements</title>
    <style type="text/css">
        body{font-family:Arial; font-size:16px; background-color:#f8e6ae; color:#888;}
        .page
        {
            background-color: #fff;
            padding: 10px 30px 50px 50px;
            margin:30px 100px 30px 300px;
        }
    </style>
</head>
<body>
    <div class="page">
        Notice the distance between the top and this text. Then compare it with the distance between the bottom border and the this text. 
    </div>
</body>

CodeJaeger.com

CodeJaeger ist eine Gemeinschaft für Programmierer, die täglich Hilfe erhalten..
Wir haben viele Inhalte, und Sie können auch Ihre eigenen Fragen stellen oder die Fragen anderer Leute lösen.

Powered by:

X