back

</>CodeWithRahul

More
  • Home
  • Cources
  • Tutorials
  • Tutorials
  • Projects
  • Notes
  • Contact
  • Work With Us
  • HTML
  • CSS
  • JAVASCRIPT
  • CC++
  • PHP
  • PYTHON
  • REACT JS
  • DSA

</>Code With Rahul

Create an account
  • INTRODUCTION
    • Information & History
    • Your first CSS Website
    • How CSS Works?
    • Ways to add CSS
    • CSS Selectors
    • CSS Comments
  • CSS Properties
    • CSS colors
    • CSS backgrounds
    • CSS Borders
    • CSS Image
    • CSS Videos Embedding
    • CSS Fonts
    • CSS Text Styling
    • CSS Padding
    • CSS Margin
    • CSS Hover
    • CSS Links
    • CSS Combinators
    • CSS Pseudo Classes
    • CSS Buttons
    • CSS Overflow
    • CSS Float
    • CSS !Important
    • CSS Maths Function
    • CSS Size
    • CSS Positioning
    • CSS Z-index
    • CSS Forms
    • CSS Navigation
  • CSS Designing
    • CSS Display
    • CSS FlexBox
    • CSS Grid
    • CSS Meida Queries
  • CSS Advance Topics
    • CSS CSS 2D
    • CSS Transform
    • CSS Transition
    • CSS Border Image
    • CSS Gradients
    • CSS Inherit
    • CSS Shadows
    • CSS ToolTip Text
    • CSS Border Image
    • CSS Masking
    • CSS Pagination
    • CSS Meida Queries Advance
    • CSS Animation
  • CSS FAGS
    • CSS Questions

    CSS Padding

    Padding is the space between the HTML content and the border. It gives internal spacing and helps to enhance the website.

    web content

    Here, the space between the content "CodeWithRahul" and the border is the padding.

    Syntex

    <style>
        selector {
            padding: value;
        }
    </style>

    Padding value can be used in any of the following methods:

    Method 1

    <style>
        selector {
            padding: value;
        }
    </style>

    Here, the padding value will apply equal padding to all sides (top, right, left, and bottom).

    Example:

    <html lang="en">
    <head>
        <style>
            #p1{
                border:2px solid #23Dafa;
            }
            #p2{
                padding:12px;
                border:2px solid #f23;
            }
        </style>
    </head>
    <body>
        <p id="p1">CodeWithRahul (Without Padding)</p>
        <p id="p2">Code With Rahul (With Padding)</p>
    </body>
    </style>

    Output

    Padding

    Note:-Values can be specified in different units, such as pixels (px), em, rem, percentage (%), auto, etc. If you are not familiar with borders, you can also check out the CSS borders tutorial.

    Method 2

    <style>
        selector {
            padding: value value;
        }
    </style>

    Here, value 1 is the veritcal padding(y-axis) and value 2 is the horizontal padding (x-axis).

    Example:

    <html lang="en">
    <head>
        <style>
            #p1{
                border:2px solid #23Dafa;
            }
            #p2{
                padding:20px 50px;
                border:2px solid #f23
            }
        </style>
    </head>
    <body>
        <p id="p1">CodeWithRahul (Without Padding)</p>
        <p id="p2">Code With Rahul (With Padding)</p>
    </body>
    </style>

    Output

    Padding

    Padding value can be used in any of the following methods:

    Method 3

    <style>
        selector {
            padding: value1 value2 value3 value4;
        }
    </style>

    In this method, each value represents the padding of individual sides (top, right, bottom, left).

    • top: value1
    • right: value2
    • bottom: value3
    • left: value4

    Example:

    <html lang="en">
    <head>
        <style>
            #p1{
                border:2px solid #23Dafa;
            }
            #p2{
                padding:15px 30px 25px 50px;
                border:2px solid #f23
            }
        </style>
    </head>
    <body>
        <p id="p1">CodeWithRahul (Without Padding)</p>
        <p id="p2">Code With Rahul (With Padding)</p>
    </body>
    </style>

    Output

    Padding

    In this example, the padding on individual sides is

    • top: 10px
    • right: 20px
    • bottom: 25px
    • left: 50px

    Playaround:

    1. You can also check the padding of each HTML element(s) using the inspect tool. Follow the steps.
    2. Right-click and click on inspect.
    3. Click on the computed styles sidebar.
    4. Toggle with the box model.
    or follow the video.

    Owner of this WebPage Image

    CodeWithRahul

    Copyright © 2023 CodeWithRahul.com