CSS - CSS Padding

 CSS Padding

Learn css - css tutorial - CSS Padding - css examples - css programs

CSS - Padding - Definition and Usage

  • The padding property apply the padding space on all sides of an element.
  • The padding property is the space between the content of the element and its border.
  • Padding has four form:Padding-top,Padding-bottom,Padding-right,Padding-left,
CSS padding
  • In CSS, the padding property defines how much space should appear between the content of an element and its border (i.e.,) which is used to generate space around the content.
  • The different values for the padding are shown below :
    • padding-bottom : It states the bottom padding of an element.
    • padding-top : It specifies the top padding of an element.
    • padding-left : It specifies the left padding of an element.
    • padding-right : It specifies the right padding of an element.

syntax : css code

p  {
        padding-top: Value px;
        padding-right: Value px;
        padding-bottom: Value px;
        padding-left: Value px;
click below button to copy the code. By - css tutorial - team

sample html code - html css

Tryit<!DOCTYPE html>
        <p style="padding-top: 35px; border:1px solid black;">
                <b>Welcome To Wikitechy</b>
        <p style="padding-bottom: 35px; border:1px solid black;">
                <b>Best E-Learning Website In the World</b>
        <p style="padding-left: 35px; border:1px solid black;">
                <b>Learn All The Technologies Easily</b>
        <p style="padding-right: 35px; border:1px solid black;">
                <b>Find Solution For All The Technological Error</b>
click below button to copy the code. By - css tutorial - team

Code Explanation - html css style

css margin left
  1. In CSS, padding-top : 35px will display the selector paragraph 35px away from the top margin.
  2. Border :1px solid red property allows us to create a border around paragraph selector and will appear in red color and style of the border will be in solid.
  3. Applying padding-bottom propertyfor the selector will display the content which have 35px white space from the bottom border.
  4. Similarly, applying padding-left propertyfor <p> tag will display all the content away from the left-hand side of the border.
  5. In CSS, padding-right : 30px will display the contents which have 35px gap from the right border.

Code Output - tutorial css

    css spacing
  1. Here we have shown the padding-top : 35px for paragraph <p> tag which is displaying the paragraph content with 1 pixels away from the top border.
  2. Similarly, we have shown the padding-bottom : 35px for paragraph <p> tag which is displaying the paragraph content with 35 pixels of white space from the bottom border.
  3. In CSS, padding-left : 35px for paragraph <p> tag will display all the content 35 pixels away from the left margin of the border.
  4. The padding-right : 35px property allows us to set right space from the border for the paragraph element.

This page provides a detailed information on introduction to css , css sheet , css for html , introduction to html and css , css with html , css style code , html css generator , css4 tutorial , css source , css html javascript , basic css tutorial , html with css example , html css basics , css style sheet example , best css tutorial , basics of css , css home page , html css online editor , css layout tutorial , html and css test.

View More Quick Examples


Related Searches to CSS - Padding