CSS and Padding


css CSS and Padding Padding Property

CSS Padding

Padding define the space in outside the container like this:

This div has a Padding of 50px.

CSS Padding Properties

You can can apply Padding properties to each side of element individually.

- Padding-top - Padding-right - Padding-bottom - Padding-left Example

You can sets the Padding on all four sides differently

Example <html> <head> <style> .paragraph { Padding-top: 50px; Padding-bottom: 80px; Padding-right: 100px; Padding-left: 100px; } </style> </head> <body> <p class="paragraph">Padding set differently on all four sides<br> Padding set differently on all four sides<br> Padding set differently on all four sides<br> Padding set differently on all four sides<br> Padding set differently on all four sides<br> Padding set differently on all four sides</p> </body> </html>

Shorthand Property

Above four properties can use in single statement like this:

Syntax div{Padding:top right bottom left; } Example <style> .short { Padding:20px 30px 40px 50px; border: 2px dashed #a2a2a2; } </style> <div class="short">This element has a shorthand Padding property applied .</div>

Padding:15px 10px; -Top and bottom have a Padding of 15 pixels. -Right and left have a Padding of 10 pixels.

Padding:15px 10px 40px; -Left and right are 10px -Bottom is 30px

Padding on all Sides

This example set the Padding on all four sides

<style> .allside{ Padding:30px ; border: 2px dashed blue; } </style> <div class="allside"> This Padding property set 30px on all four sides top,right,bottom and left. </div>
css Padding Property Chapter Next »