TOPIC:- CSS Borders Margins
And Padding
Border
The CSS border is a shorthand property used
to set the border on an element.
The CSS border properties are use to specify
the style,color and size of border of an
element
Border
CSS border-style:
The border style property is used to specify the border
type which you want to display on the web page.
CSS border-width:
The border-width property is used to set the border’s
width. It is set in pixels. We can use the predefined values,
thin, medium or thick to set the width of the border.
CSS border-Color:
There are three methods to set the color of the border.
Name: Specifies the colour Name
RGB: Specifies the RGB value of the colour
Hex: Specifies the hex value of the colour
Border
Border
Margins
CSS margin property is used to define the space
around elements.
It is completely Transparent and doesn’t have an
background color.
It clears an area around the element.
Margin Properties
Margin-Left: This property is used to set all the
properties in one declaration
Margin-Right: This property is used to set right
margin of an element.
Margin –Top: It is used to set top margin of an
element.
Margin – Bottom: It is used to set bottom margin
of an element.
Margin Values
CSS Margin-Auto: It is used to let the browser
calculate a margin.
CSS Margin – Length:It is used to specify a margin
pt,px,cm etc.Its default value is 0px
CSS Margin- Inherit:It is used to inherit the
margin from parent element.
Margin
Margin
Padding
CSS Padding property is used to define the
space between the element content and the
element border.
It is different from CSS margin where the
CSS margin defines the space around
elements.
CSS padding is affected by the background
colors.
Padding
Padding-Left:It is used to set the left
padding of an element
Padding-Right:It is used to set right
padding of an element
Padding-Top:It is used to set top padding of
an element
Padding-Bottom:It is used to set bottom
padding of an element.
Padding Values
Padding-Length:It is used to define fixed
padding in pt,px,em
Padding-% : It defines padding in % of
containing element.
Padding
Padding