Border-Ausrichtung

[Quov]

Servuz - im Rahmen der Auffrischung von CSS hätte ich da eine ungeklärte Frage meinerseits, zu der ich bisher keine Antwort gefunden habe.

Es ist ja möglich, den Border folgendermaßen zu definieren:

  
border-top: 1px solid black;  
border-left: 1px solid black;  
border-bottom: 1px solid black;  
border-right:0px;  

Allerdings ist es im Rahmen des Boxmodells gleichzeitig möglich Abstandsdefinitionen wie Margin folgende Werte zuzuweisen:

  
margin: 10px 10px 0 10px;  

Damit ist beginnend am top folgend im Uhrzeigersinn definiert, wie die Abstände zu realisieren sind.

Um quelltext zu sparen ist meine Frage nun, ob dasselbe auch für Borders möglich ist.

  
border: 10px 0 10px 10px;  
  

Hat mich leider nicht ans Ziel gebracht.

Lg

[Felix Riesterer]

Lieber Quov,

border-top: 1px solid black;

border-left: 1px solid black;
border-bottom: 1px solid black;
border-right:0px;

  
Du verwendest hier bereits verkürzte Schreibweisen, sogenannte shorthands, denn es gibt für jede Eigenschaft eine Bezeichnung. Wenn Bezeichnungen zu shorthands zusammengefasst werden, dann kann das - wie im Beispiel von border - "stufenweise" geschehen. Da es bei "border" viermal (oben/rechts/unten/links) um im Prinzip drei Eigenschaften geht, kann man nur sehr begrenzt zu shorthands zusammenfassen (entweder 3 Eigenschaften oder 4 Seiten).  
  
Du kannst also Eigenschaften zusammenfassen, um diese gesammelt z.B: für "border-top" zu definieren (das hast Du in Deinem ersten Code-Beispiel getan), oder Du fasst die Seiten zusammen, um diesen gemeinsam eine einzige Eigenschaft wie z.B. "border-width" zu geben (das hast Du im zweiten Beispiel versucht).  
  

> `border: 10px 0 10px 10px;`{:.language-css}  
>   
> Hat mich leider nicht ans Ziel gebracht.  
  
Was hast Du Dir dabei gedacht? "border" bezeichnet alle vier Rahmen mit allen drei Eigenschaften... und Du nennst nur eine, die aber dafür in vier Varianten!  
  
Liebe Grüße,  
  
Felix Riesterer.

-- 
ie:% br:> fl:| va:) ls:[ fo:) rl:° n4:? de:> ss:| ch:? js:) mo:} zu:)

[Quov]

So wie ich das verstanden habe, ist die extreme Zusammenfassung von Margins also nur Möglich, weil sie nur die Eigenschaften des Abstands definieren, Border aber neben Breite auch noch weitere Eigenschaften wie Farbe etc. haben?

Demnach ist die kürzeste Variante also, dass ich für jede Seite, an der ich einen Rahmen positioniert haben möchte, ich diesen auch ausformuliere.

Lg und Danke

[Malcolm Beck´s]

hi,

Demnach ist die kürzeste Variante also, dass ich für jede Seite, an der ich einen Rahmen positioniert haben möchte, ich diesen auch ausformuliere.

Oder einfach alle mit einbeziehst und einen Explizit überschreibst:

boder:10px solid #000;  
border-bottom:0 none; /* oder eine andere Farbe zuweisen der wai */

mfg