CSS Box Model & Border

border

( border-width border-style (required) border-color )

border-width : specifies the width of the four borders (px, pt, cm, em, thin, medium, thick)

border-style : specifies what kind of border to display

• dotted , dashed , solid , double , none , hidden , groove , ridge , inset , outset

border-color : set the color of the four borders

border-radius : add rounded borders to an element

border-radius: 5px 10px 15px 20px; 
****top-left   top-right   bottom-right   bottom-left*****
border-radius: 5px 10px;
***top-left & bottom-right    top-right & bottom-left***

Box Model

• Content — The content of the box, where text and images appear
• Padding — Clears an area around the content. The padding is transparent
• Border — A border that goes around the padding and content
• Margin — Clears an area outside the border. The margin is transparent

padding : inside of any defined borders.

margin : outside of any defined borders

padding: 5px  10px  15px  20px; 
****top   right   bottom   left*****
padding: 5px  15px  20px; 
****top   right & left   bottom*****
padding: 5px  10px;
***top & bottom    right & left***

Float & Clear

float : specifies how an element should float

none: default
left: The element floats to the left of its container
right: The element floats the right of its container
(將元素設為「浮動」，任何設有浮動樣式的元素，都將變為區塊型元素，而浮動的承載區塊為其最接近的親代元素)

clear : which sides of an element floating elements are not allowed to float

clear: left , clear: right , clear: both

Reference:

https://www.w3schools.com/css/css_border.asp

https://www.w3schools.com/css/css_margin.asp

https://www.w3schools.com/css/css_padding.asp

https://www.w3schools.com/css/css_boxmodel.asp

https://www.w3schools.com/cssref/pr_class_float.asp

https://www.w3schools.com/cssref/pr_class_clear.asp