CSS borders and Borders

• use of borders in CSS
• Use of boundaries in CSS

16.1 CSS The use of the middle border

           Span style= "font-family: Equal line" > property name                          description
       border-color     hex         can be set sequentially, right, bottom, left line color

English name border-color:red ( four edges are red )

Tri primary color border-color:red Green

( Red Upper and lower, green for left and right )

Border-color:red Green Blue

( red on top, green in left and right, blue below )

Border-color:red Green Blue Yellow

( red, green, blue and yellow on upper right and lower left respectively )

Border-style None do not display edges

dotted Point Line

Dashed Dashed Lines

Solid Solid Line

Double Double Line

border-width length border-width:0.2px 0.3px 0.4px 0.5px;

( 0.2px 0.3px 0.4px 0.5px on upper right and lower left respectively )

Border-width:1 2 3 4;

Property Name: Property value 1 Property Value 2 Property Value 3 Property Value 4 (upper right lower left in turn) à the same property name for the border can use multiple property values at the same time

Simplified Scenario: border: length shape color

For example border:1px solid black;

16.2 CSS The use of the middle boundary

padding Property Introduction (object squeezing itself)

Property name property value description

Padding-bottom length / percentage Gap of the lower edge of the component

Padding-left length / percentage The gap of the left side edge of the component

Padding-right length / percentage gap in the right edge of the component

Padding-top length / percentage Gap of the upper edge of the component

Simple notation: padding:10px (The four borders are 10px )

padding:2px 4px ( up and down 2px , around 4px )

padding:2px 6px 10px (Upper 2px , around 6px , the next 10px )

padding:1px 2px 3px 4px (Upper-right-bottom left-click 1px 2px 3px 4px )

margin Introduction to Series properties (objects extruded outside)

Property name property value description

Margin-bottom Auto Automatic Clearance Adjustment

length / percentage set lower void

Margin-left Auto Automatic Clearance Adjustment

length / percentage set left end void

margin-right Auto Automatic Clearance Adjustment

length / percentage set right end void

Margin-top Auto Automatic Clearance Adjustment

length / percentage set upper end void

Simplified Scenario: margin:2px 4px

margin:2px 6px 10px

margin:1px 2px 3px 4px

Common Web page shelf settings: margin:0;

CSS borders and Borders