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>
<html>
   <head>
   </head>
   <body>
        <p style="padding-top: 35px; border:1px solid black;">
                <b>Welcome To Wikitechy</b>
        </p>
        <p style="padding-bottom: 35px; border:1px solid black;">
                <b>Best E-Learning Website In the World</b>
        </p>
        <p style="padding-left: 35px; border:1px solid black;">
                <b>Learn All The Technologies Easily</b>
        </p>
        <p style="padding-right: 35px; border:1px solid black;">
                <b>Find Solution For All The Technological Error</b>
        </p>
    </body>
</html>
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

CSS BASICS & SELECTORS CSS SELECTOR ATTRIBUTE CSS STYLE FORMS COLORS & BACKGROUND CSS MARGIN & PADDING CSS WIDTH & HEIGHT CSS LINKS CSS BLOCKS

Related Searches to CSS - Padding

Adblocker detected! Please consider reading this notice.

We've detected that you are using AdBlock Plus or some other adblocking software which is preventing the page from fully loading.

We don't have any banner, Flash, animation, obnoxious sound, or popup ad. We do not implement these annoying types of ads!

We need money to operate the site, and almost all of it comes from our online advertising.

Please add wikitechy.com to your ad blocking whitelist or disable your adblocking software.

×