Verwenden Sie HTML-Div, um nur oben und unten einen Rand hinzuzufügen?

Question

Ich verwende das HTML DIV-Tag, um meine Überschrift mit einem Rahmen zu formatieren, wie folgt:

This is a header

Ich möchte jedoch, dass der Rahmen nur oben und unten erscheint, aber nicht links und rechts. Ich möchte den Rahmen auf die gleiche Weise wie das Padding für oben, links, unten und rechts, aber der Rahmen hat diese Funktion nicht (oder ich weiß es nicht?). Gibt es eine Möglichkeit in CSS-Stil, das zu tun?

Answer 1

Zu zukünftigen Referenzzwecken ist folgende eine alternative Methode, die es vermeidet, Grenzeigenschaften (Farbe, Breite) mehr als einmal definieren zu müssen und Deklarationen ähnlich denen für Rand und Polsterung zuzulassen (wie angefordert).

border: 5px grün;
border-style: solid none;

Wie bei Rand oder Polsterung wird border-style in der Reihenfolge oben, rechts, unten, links definiert. Im obigen Fall wird einem Element oben und unten ein fester Rahmen und kein Rahmen links oder rechts vom Element zugewiesen.

Bei Verwendung dieser Methode werden Redundanzen in der Deklaration vermieden.

Answer 2

Nur ein Fall von:

Das ist eine Überschrift

Answer 3

Sie können das Folgende in Ihrem CSS oder Style-Tag verwenden ....

#div-id {
width: 100px;
height: 50px;
border-style: solid;
border-width: 1px 0;
border-color: #000;
}

Mithilfe des border-width-Selektors können Sie die verschiedenen Rahmenstärken definieren. Die Werte werden in der Reihenfolge oben, rechts, unten, links eingegeben und die Kurzform ist oben/unten und rechts/links, was ich verwendet habe.

Zum Beispiel können Sie einen div mit einem 4px oberen Rand, einem 3px rechten Rand, einem 2px unteren Rand und einem 1px linken Rand mit dem folgenden .... border-width: 4px 3px 2px 1px; setzen.

Sie können sowohl obere als auch untere Ränder auf 3px und die linken und rechten Ränder auf 1px setzen mit dem folgenden .... border-width: 3px 1px;

Answer 4

border-top: 5px solid green; border-bottom: 5px solid green;

Du solltest diesen Stil direkt auf das

setzen, anstatt es mit einem div zu umschließen.

Answer 5

Sie können border-right border-left ... separat angeben.