Beim Erstellen einer Website oder eines Blogs wird häufig das Blocklayout verwendet. Dadurch ist es oft notwendig, Blöcke einzurücken. Aus diesem Grund ca wie man in CSS einrückt wird in dieser Lektion ausführlich beschrieben. Für den Browser ist jedes Tag ein Container mit Inhalt, Auffüllung, Außenrändern und einem Rahmen. In dieser Lektion lernen wir, wie man interne und externe Einzüge erstellt und deren Hauptparameter berücksichtigt.
Die folgende Abbildung zeigt deutlich die Parameter für den Blockeinzug:
Wie Sie sehen, können Einzüge in vier Richtungen erfolgen: oberer Einzug (oben), unterer Einzug (unten), linker Einzug (links) und rechter Einzug (rechts). Maßeinheiten können Pixel, Prozentsätze und andere CSS-Einheiten sein – erfahren Sie mehr darüber. In diesem Tutorial werden Pixel verwendet.
Blockpolsterung
Die für das Auffüllen in CSS verantwortliche Eigenschaft ist Polsterung. Schauen wir uns also ein Beispiel für das Festlegen der internen Auffüllung für einen Block an:
Polsterung oben: 5px; /*top padding*/ padding-left: 8px; /*left padding*/ padding-right: 8px; /*right padding*/ padding-bottom: 5px; /*Bodenpolsterung*/
In diesem Beispiel wird die Polsterung für jede Seite des Blocks separat eingestellt. Darüber hinaus gibt es mehrere Möglichkeiten, Einrückungen in CSS festzulegen:
Rand: 5px 8px 5px 8px; /*oben, rechts, unten, linke Ränder*/ margin: 5px 8px 5px; /*beschreibt die oberen, linken, rechten und unteren Ränder*/ margin: 5px 8px; /*beschreibt den oberen und unteren, rechten und linken Rand*/ margin: 7px; /*beschreibt alle internen Ränder von 7px*/
Es ist einfacher, sich die erste und letzte Methode zu merken. Im ersten Fall werden die Einrückungen im Uhrzeigersinn platziert (oben, rechts, unten, links) – wir können eine beliebige Anzahl an Einrückungen angeben; im letzteren Fall sind die Einrückungen auf allen Seiten gleich.
Blockränder
Die für Ränder in CSS verantwortliche Eigenschaft ist Marge. Beispiele für Ränder in CSS:
Rand oben: 5px; /*oberer Rand*/ margin-left: 10px; /*linker Rand*/ margin-right: 10px; /*rechter Rand*/ margin-bottom: 5px; /*unterer Rand*/
Polsterung: 5px 10px 5px 10px; /*oben, rechts, unten, linke Ränder*/ padding: 5px 10px 5px; /*beschreibt die obere, linke und rechte, untere Polsterung*/ padding: 5px 10px; /*beschreibt die obere und untere, rechte und linke Polsterung*/ padding: 7px; /*beschreibt alle 7px-Ränder*/
Auf diese Weise, wie man in CSS einrückt- Die Frage ist nicht schwierig, aber sehr relevant. Um die oben beschriebenen Informationen besser zu verstehen, sollten Sie bedenken, dass es zwei Eigenschaften gibt: padding – interne Einzüge und margin – äußere Einzüge. Außerdem gibt es, wie Sie bereits wissen, mehrere Möglichkeiten, Einzüge festzulegen, die Sie nutzen können.
Wilkommen auf meinem Blog. CSS (Cascading Style Sheets) bietet viele Optionen zum Anpassen des Erscheinungsbilds von Webseiten. Heute möchte ich kurz zeigen, wie man in CSS den Abstand oben oder auf einer anderen Seite für ein beliebiges Element definiert.
Marge
Der Rand wird mit der Eigenschaft margin festgelegt. Mit seiner Hilfe können Sie Ränder auf allen vier Seiten gleichzeitig festlegen oder andere Eigenschaften verwenden: margin-top, margin-left, margin-right, margin-bottom, die es Ihnen ermöglichen, nur auf einer Seite zu erstellen.
Der Rand bestimmt den Abstand, um den die ausgewählte Kante eines Elements von anderen Elementen auf der Seite versetzt wird. Beispielsweise der Eintrag:
P,div(
Rand oben: 20px;
}
Dies bedeutet, dass alle Blöcke und Absätze oben um 20 Pixel eingerückt werden, d. h. ihre Oberkante wird um diesen Abstand von den angrenzenden Elementen wegbewegt.
Ränder können auf jeder Seite mit nur einer Randeigenschaft geschrieben werden, in die 4 Werte hintereinander geschrieben werden:
Div(
Rand: 20px 10px 20px 10px;
}
Die Polsterung erfolgt jeweils am oberen, rechten, unteren und linken Rand. Da sie in diesem Fall auf gegenüberliegenden Seiten gleich sind, könnten wir es auch so schreiben:
Div(
Rand: 20px 10px;
}
Der erste Wert ist der Rand oben und unten, der zweite der Rand an den Seiten.
Vertiefung
Die innere Auffüllung funktioniert anders – sie verschiebt den Block nicht von anderen Elementen weg, sondern fügt diesen Platz innerhalb des Elements hinzu und verschiebt den Inhalt des Blocks von seinen Kanten weg. Das ist bequem. Wo haben Sie eine Website gesehen, bei der der Text ganz oben links im Fenster beginnt?
Ich habe das nicht gesehen, da Webentwickler immer externe und interne Einzüge verwenden, um den Text so einfach wie möglich lesbar zu machen. Die interne Auffüllung wird über die Eigenschaft padding angegeben, in der jeweils 4 Werte gleichzeitig, durch ein Leerzeichen getrennt, für alle Kanten aufgeführt werden können.
Außerdem können Sie, ähnlich wie beim Rand, den Namen der Seite hinzufügen und nur den Abstand für diese Seite festlegen. Top-Padding kann beispielsweise mit padding-top geschrieben werden. Im Allgemeinen funktioniert die padding-Eigenschaft genauso wie die margin-Eigenschaft.
Sie können beispielsweise diesen Codeabschnitt angeben:
Block(
Breite: 200px;
Polsterung: 20px;
}
Wie groß wird Ihrer Meinung nach die tatsächliche Breite unseres Elements sein? Hier sehen Sie, dass es 200 Pixel sind, aber durch die Auffüllungen kommen auf jeder Seite weitere 20 hinzu, also insgesamt 240 Pixel. Berücksichtigen Sie dies bei der Gestaltung.
Ich möchte auch darauf hinweisen, dass Padding normalerweise nur Blockelementen zugewiesen wird; es ist besser, es nicht Inline-Elementen zuzuweisen. Margin funktioniert gut mit allen Elementen.
Um Elemente auf einer Webseite schöner darzustellen, werden in CSS externe und interne Ränder verwendet, was wir uns nun anhand von Beispielen ansehen.
Jedes Element, sei es ein Absatz, ein Div, ein Bild oder ein Video, ist ein Block, der sowohl innen mit der padding-Eigenschaft als auch außen mit margin eingerückt werden kann.
In CSS werden diese Eigenschaften für die Einrückung folgendermaßen geschrieben (als Beispiel wird ein Absatz genommen):
Anstelle des P-Tags schreiben Sie natürlich Ihr eigenes Element, für das eine Einrückung angewendet wird.
Es ist wichtig zu verstehen und zu bedenken, dass für die Parameter „Rand“ und „Auffüllung“ die Konstruktion der Einzüge für jede Seite gleich ist.
Das heißt, wir haben in jedem Einzug 4 Werte:
Werte einrücken.
- Erster Wert: Polsterung oben;
- Zweite Bedeutung: nach rechts einrücken;
- Dritte Bedeutung: unterer Einzug;
- Vierte Bedeutung: linker Einzug.
In diesem Beispiel habe ich den äußeren Randeinzug in CSS folgendermaßen erstellt: Ich habe oben 20 Pixel, links und rechts 10 Pixel (normalerweise sind sie aus Symmetriegründen gleich eingestellt) und unten 30 Pixel geschrieben.
Und für die Polsterung habe ich angegeben: 10 Pixel oben, links und rechts und 14 Pixel unten.
Der Wert für Einzüge in den Rand- und Padding-Eigenschaften kann reduziert werden, sofern sie die gleiche Größe haben.
In meinem Beispiel sieht die abgekürzte Notation so aus:
Das heißt, wenn der letzte numerische Eintrag fehlt, in diesem Fall für den linken Einzug, ersetzt der Browser automatisch den gleichen Wert für den linken Einzug wie den Wert rechts.
Und in meinem Fall betragen die Ränder rechts und links sowohl beim Rand als auch beim Abstand 10 Pixel.
Und wenn Sie die gleichen Werte für die Ränder oben und unten haben (zum Beispiel: 16px) und auch die gleichen Werte für die Ränder links und rechts (zum Beispiel: 20px), dann wird der Eintrag haben eine noch kürzere Form:
Dementsprechend auch für die Innenpolsterung CSS-Eintrag genauso gemacht wie hier.
Anwendung einzelner Einzüge: für jede Seite separat.
Die folgenden Einzelwerteigenschaften werden verwendet, um einen einzelnen Einzug anzugeben:
Eigenschaften für jede Seite einrücken.
- Rand oben: 3px; äußerer oberer Rand;
- Rand links: 4px; äußerer linker Rand;
- Rand rechts: 6px; äußerer rechter Rand;
- Rand unten: 10px; äußeren unteren Rand.
Einträge für interne Einzüge werden auf die gleiche Weise geschrieben, nur dass Sie den Rand durch eine Polsterung ersetzen müssen.
Beispielsweise haben Sie für alle IMG-Bilder bereits alle Einzüge in CSS geschrieben.
Das heißt (zur Verdeutlichung), dass der äußere Rand die folgenden Werte hat: 10 Pixel oben, 20 Pixel links und rechts und 14 Pixel unten.
Und die Innenpolsterung beträgt auf allen 4 Seiten 6 Pixel.
Nehmen wir an, Sie möchten ein weiteres Bild auf der Seite platzieren, möchten dafür aber nur den äußeren Rand oben ändern und den Rest unverändert lassen. Und um diese Aufgabe abzuschließen, reicht es aus, eine Klasse für dieses Bild zu registrieren und einen zusätzlichen Eintrag zum CSS hinzuzufügen.
Infolgedessen akzeptiert das Bild, das Sie mit der Verx-Klasse hinzugefügt haben, alle im CSS für das img-Tag angegebenen Abstände und ändert nur den äußeren Abstand für die Oberseite (in unserem Fall: 40 Pixel).
Ich habe versucht, die Beschreibung für CSS-Einrückungen detaillierter zu gestalten, aber wenn Sie Fragen haben, stellen Sie diese über die Kommentare.
Guten Tag! Ursprünglich wollte ich diesen Artikel in 4 kleine Teile aufteilen, aber dann habe ich darüber nachgedacht. Wofür? Schließlich ist es bequemer, wenn solche Informationen in einem Material gesammelt werden.
Deshalb lernen wir heute, wie man CSS-Einrückungen auf der linken und allen anderen Seiten – rechts, oben und unten – vornimmt. Sie können für Bilder und Texte angefertigt werden. Es gibt sie in zwei Arten:
- Extern;
- Intern.
Für Ersteres ist die Schlüsseleigenschaft der Rand, für Letzteres die Polsterung. Zur Verdeutlichung habe ich ein kleines Beispiel für Sie gemacht. Um die Unterscheidung zwischen Innen- und Außenraum optisch zu erleichtern, habe ich eine sichtbare Tabelle hinzugefügt. Lass uns nachsehen, was passiert ist?
Ränder
Indem Sie sie in einer Datei registrieren CSS-Stile können Sie die Ausrichtung des Informationsblocks auf der Seite festlegen. Ich verschiebe es zum Beispiel nach links und unten. Lassen Sie mich sofort zeigen, wie es aussehen wird.
Im Allgemeinen können Sie die folgenden Optionen zum Festlegen von Einzügen verwenden.
Links (Rand links).
Rechts (Rand rechts).
Oben (Rand oben).
Unten (Rand unten).
Jetzt zeige ich euch noch eine coole Nuance.
Wie Sie sehen, können Sie eine der Optionen nutzen – der Effekt ist der gleiche. Nur im zweiten Fall fällt der Code kompakter aus. Beachten Sie außerdem, dass die Einzüge im Uhrzeigersinn erfolgen. Alles beginnt oben und endet links.
Polsterung
Die Vorgehensweise ist hier ähnlich. Erst jetzt füge ich neue Eigenschaften hinzu, nicht für die gesamte Tabelle, sondern für den Inhalt der Spalten.
Mal sehen, was dabei herausgekommen ist.
In Analogie zu Vertiefung V CSS extern kann in einem abgekürzten Code oder für die Parteien separat geschrieben werden.
Das waren die Hauptpunkte. Abschließend zeige ich Ihnen, wie Sie sich die Arbeit sonst noch erleichtern können.
Einrückung auf der ausgewählten Tag-Ebene
In den oben gezeigten Fällen werden sie gleichzeitig für Text und Bilder festgelegt. Tatsächlich können Sie den Abstand zu Elementen auf der Ebene eines bestimmten Tags festlegen. Ich werde Ihnen zeigen, wie es funktioniert. Ich breche ab Letzte Änderungen und geben Sie speziellen Code in der Stildatei an.
Schauen wir uns an, was nach dem Speichern der Änderungen passiert ist.
Das Bild blieb an Ort und Stelle, nur der darin eingeschlossene Text wurde nach links verschoben. Ähnliche Manipulationen können auf andere Blöcke angewendet werden, beispielsweise tr, span.
Als Weitere Informationen Ich empfehle Ihnen, die Veröffentlichung über die Aufgabe zu lesen. Dort sind sie auch ausreichend beschrieben interessante Wege. Kann nützlich sein, um eine rote Linie im Text zu bilden oder andere Aktionen auszuführen.
Zusätzlich ein Abonnement für kostenloser Newsletter Informationen zu E-mailadressen. Für das Abonnieren des Blogs gibt es ein spezielles Formular. Bis später.
Mit dem Aufkommen von CSS-Einrückungsverwaltungseigenschaften haben Webentwickler enorme Möglichkeiten, die Benutzeroberfläche und das Design von Website-Seiten zu verwalten. Bisher wurden Einrückungen mithilfe von Tabellen verwaltet, was wesentlich komplexer und umfangreicher war.
Schauen wir uns die grundlegenden Eigenschaften des Abwesenheitsmanagements an.
Verwalten von Rändern in HTML mithilfe von CSS mithilfe der Margin-Eigenschaft
CSS-Eigenschaft Marge ermöglicht Ihnen eine exakte Steuerung Außenränder. Nehmen wir an, es gibt ein Bild, für das Sie äußere Ränder angeben müssen: 30 Pixel oben, 20 links, 10 rechts und 5 unten.
Um den Rand oben festzulegen, schreiben wir: margin-top: 30px
So legen Sie den linken Rand fest: margin-left: 30px
Rechter Rand: Rand rechts: 10 Pixel
Und unten: margin-bottom: 5px
Sie können alles kombinieren, indem Sie Folgendes schreiben: margin: 30px 10px 5px 20px;
Lassen Sie uns beispielsweise diese Abstände für ein Bild festlegen. Wir erhalten den folgenden HTML-Code:
Sie können sehen, wie sich das Bild relativ zum übergeordneten Element verschoben hat.
Wenn Sie margin: 30px angeben, dann CSS-Auffüllung wird auf allen vier Seiten gleich sein und 30 Pixel betragen.
Essen Optionen Anweisungen zwei und drei Werte in der Spezifikation: margin:10px 20px;. Dieser Parameter stellt sicher, dass die externen Ränder im CSS oben und unten 10 Pixel und links und rechts 20 Pixel betragen.
Für angehende Layouter ist es oft nicht immer möglich, sich alle möglichen Kombinationen sofort zu merken Anfangsstadien Sie können die folgenden Parameter verwenden: margin-top, margin-right, margin-left und margin-bottom. Oben – oben, rechts-rechts, links-links, unten-unten.
