Describe About CSS Margin and CSS Padding Class:9 ( WPD )

Hello friends in this blog post we will learn about web page development (CSS Margin and CSS Padding) (CLASS:9) computer engineering students Now lets start.

                           CSS Margin

→ The css margin properties are used to create space around elements,outside of any defined borders.

→ CSS has properties for specifying the margin for each side of an element :

. margin-top

. margin-right

. margin-bottom

. margin-left

→ All the margin properties can have the following values :

. auto- the browsers calculates the margin .

. Length- specifies a margin in px,pt,cm,etc .

. %- specifies a margin in % of the width of the containing element .

. Inherit- specifies that the margin should be inherited form the parent element .

Example:

    h1{ margin-bottom: 20px;}

    p{ margin-left: 10px;}

    margin-right: 30px;}

→ The margin short hand property

The margin property is a short hand property to avoid setting margin in of each side separately: margin-top,margin right,margin-bottom and margin-left .

                        

                            CSS Padding

→ The css padding properties are used to generate space around an element's content inside of any defined borders.

→ CSS has properties for specifying the margin for each side of an element :

. padding-top

. padding-right

. padding-bottom

. padding-left

→ All the padding properties can have the following values :

. Length- specifies a padding in px,pt,cm,etc .

. %- specifies a padding in % of the width of the containing element .

. Inherit- specifies that the padding should be inherited form the parent element .

Example:

The output of the above examples will look something like this:

I hope this blog is helpful for you in another post i will describe about UNIT:3 CSS Font Style,CSS Font Weight,CSS Font Size please follow this blog.

Thanks for reading my blog #stay safe #stay home #stay healthy #stay cool.

Continue in another blog post so connected this blog for another post

 ***************Thanks for reading my blog**************