7/6/21

CSS Tutorial :- CSS Padding Property

CSS PADDING

CSS Padding Property is used to give some space between the element content and element border. Just like margin you can provide the padding from the top, bottom, left, right, etc. You can independently apply padding on the element using separate properties.  And you can also apply padding property at once by using shorthand property. 

But, Padding and margin property both are different from each other. The difference between margin and padding was the margin property would have applied outside the element. But the padding property would have applied inside the element.

CSS Padding Properties

  1. Padding: - This property is used to set padding in one declaration. 
  2. Padding-top: - This property is used to set padding at the top. 
  3. Padding-right: - It is used to set the padding from the right side of the element. 
  4. Padding-bottom: - It is used to set the padding from the bottom of the element. 
  5. Padding-left: - This property was applied from the left side of the element. 

CSS Padding Values

The Value of padding can be set in Four ways: -

  1. Length: - It Specifies padding in px, pt, cm etc.    
  2. % (percentage): - It define padding in % percentages
  3. Initial: - It set the padding at default values.
  4. Inherit: - It inherits padding from its parent elements

Example: - 

<!DOCTYPE html>
<html>

<head>
    <style>
        .container {
            displayflex;
        }

        #first,
        #second {
            border2px solid red;
            width30%;
            height120px;
            /* padding: 23px 23px 23px 23px; */
            margin23px;
        }
    </style>
</head>

<body>

    <h1> Padding Property </h1>

    <div class="container">
<p id="first"><b> This is First Paragraph.</b><br><br> Lorem ipsum, dolor
 sit amet consectetur adipisicing elit.
Assumenda libero impedit omnis voluptatibus, in neque 
nulla sed quis voluptatum repellat! Hic, cumque vero!</p>
        
<p id="second"> <b> This is Second paragraph.</b><br><br> lsdjlajsdljaldsj
asdjflasjdflajsdlfjasldfjlas dflads flaskdj fl asdjflkasd flasdjflkasd 
jflkasdjfil asdflkasdjf jdlasd flsad flkasdjf lasdfj lasdf alskdjfalsk dfjlaksd
faslkdfj alskdfjlaksd jflasdjflk .</p>
   
 </div>

</body>

</html>

Ouput: -

Without Padding

With Padding


3 comments:

  1. Xe nâng Đông Đô là địa chỉ chuyên cho thuê:
    - "Xe nâng komatsu 5 tấn".
    - "Xe nâng Mitsubishi".
    - "Xe nâng TCM cũ".
    - "Xe nâng Toyota cũ".
    Uy tín, giá rẻ nhất trên thị trường. Gọi ngay theo Hotline: 091.351.9810- 0912.018.299 để được hỗ trợ chi tiến nhất.

    ReplyDelete
  2. Thanks for sharing nice information with us. i like your post and all you share with us is uptodate and quite informative, i would like to bookmark the page so i can come here again to read you, as you have done a wonderful job. phuket property

    ReplyDelete
  3. I love the way you write and share your niche! Very interesting and different! Keep it coming! building survey london

    ReplyDelete

Like us on facebook

blogger templatesblogger widgets

Follow on Twitter

Linkedin

Categories

Mad About Computer. Powered by Blogger.