Codechef4u is a community for computer professionals,by computer professionals,just like you; who loves sharing and helping each others,Join them
Share your post

Padding for html element using CSS

html element's padding area is the space between its content and its border.

The padding is a shorthand for following properties, and follow following sequence

1. padding-top
2. padding-right
3. padding-bottom
4. padding-left


Code example with all four values

. menu {
    padding: 5px -5px 10px -0px;
}

The CSS padding-top property sets the top padding of an element.

Padding top example

.about-content {
    padding-top: 10px;
}


The CSS padding-bottom property sets the bottom padding of an element.

Padding bottom example

.footer-content {
    padding-bottom: -5px;
}


The CSS padding-right property sets the right padding of an element.

Padding right example

 .left-menu{ 
    padding-right:2em;
}


The CSS padding-left property sets the left padding of an element.

Padding left example  

.right-content{
    padding-left:2%;

How to Indent the text of a paragraph and align the text of a document

Following CSS text formatting properties are used to Indent the text of html element and align the text of document.

Text indentation property

Text indentation property is used to indent the first line of the paragraph.

Note: The size can be in px, cm, percentage

Code example for text inside paragraph and div

p.title {
    text-indent: -2em;
}
 
p.a {
    text-indent: 25px;
}
 
div.left-section {
    text-indent: 12%;
}

Text alignment property

Text alignment property is used to set the horizontal alignment of the text.

These CSS values can be used to set Left, right, left, right, centered, and justified alignment.

Syntax:

CSS-selector {
    text-align: alignment type;
}

Code example:

/*Text alignment centered for button element*/ 
button
{
    text-align:center;
}
 
/*Text alignment left for main content section*/
.main-containt
{
    text-align:left;

Set color and width for border using CSS

The border-width property  

The border-width property sets the width of an element's four borders.

border width property values,

border-width: medium|thin|thick|length|initial|inherit;

Code example

div.dashboard {
    border-width: medium;
}

The border-color property

The border-color property sets the color of an element's four borders.

Code example

 div.dashboard {
    border-width: medium;
    border-color:gray;
}