Box

CSS provides a properties to create/control the box.

Width

 The width property is used to set the width of a box.

width
Syntax:
width: value;
Values: length | percentage | auto
Default: auto
Applies to: block-level and replaced element
Inherits: no

Example
 p {width: 500p;}
Height

 The height property id used to set the height of a box.

height
Syntax: 
height: value;
Values: length | percentage | auto
Default: auto
Applies to: block-level and replaced element
Inherits: no

Example 
p {height: 123px;}
Box sizing

 The box-sizing property is used to specify the box.

box-sizing
Syntax:
box-sizing: value;
Values: content-box | border-box
Default: content-box
Applies to: all element
Inherits: no

Example
box {box-sizing: border-box;}
Overflow

 The overflow property is used to control overflow of the content.

overflow
Syntax:
overflow: value;
Values: visible | hidden | scroll | auto
Default: visible
Applies to: block-level and replaced element
Inherits: no

Example
p {overflow: hidden
Box shadow

 The box-shadow property is used to applies a drop shadow around the box.

box-shadow
Syntax:
box-shadow: value;
Values: ‘horizontal offset’ ‘vertical offset’ ‘blur distance’ spread distance’ color’ ‘inset’ | none
Default: none
Applies to: all element
Inherits: no

Example
h1 {box-shadow: 3px 3px 5px 6px blue;}
 /*here 5px blur, 6px spread */


 

Display

 The display property used to specify behave in layout of element.

display
Syntax:
  display: value;
Values: none|contents|inlin|block|inline-block|table|inline-table|flex|inline-flex|grid|inline-grid|run-in|flow|flow-root|ruby | list-item | etc.
Default: inline
Applies to: all element
Inherits: yes

Example 
h1 {display: inline-block;}

Leave a Reply