How to Install Operating System ??Complete Guide Installing The Operating System

How To Manage Padding In CSS

If in the previous tutorial we discussed how to set margins, this time we will discuss how to manage to pad in CSS. Padding is a space within the element between the content and the border, padding is usually used so that the content on the website does not collide with the boundaries of the elements in it so that it can damage the appearance of the website.

Before going forward, there are a number of articles that you might be looking for.

Read Too :

The following are the padding properties that will be discussed in this tutorial.

  • padding property short to set the entire padding of element parts in one declaration
  • padding-top property to set the top padding
  • padding-bottom property to set the bottom padding
  • padding-left property to set the left padding
  • padding-right property to set the right padding

We will discuss the property above along with the complete source code so that it is easily understood and practiced.

How To Manage Padding In CSS

To set the padding so that the space or distance of padding in the element can be seen we will make a boundary line between the element and the content, namely by making the border first.

The first padding property we discussed is a short property of padding to arrange all parts of an element in a declaration, here is the code.

padding: 10px 10px 10px 10px;

From the syntax above, it can be seen that all elements have space in the element with a distance of 10 pixels each. The following is an explanation of the padding positions of the code above.

How To Manage Padding In CSS
How To Manage Padding In CSS

If you want to set different padding in a certain position that needs to be done just change the values ​​of each position padding in the code above. Here’s the complete padding source code.

<!DOCTYPE html>
<html>
<head>
     <title> Padding </title>
     <style type = "text/css">
     .padding {
         border: 1px solid #000;
         padding: 10px 10px 10px 10px;
      }
      </style>
</head>
<body>
      <div class = "padding">
          Padding content
      </div>
</body>
</html>

And here is the display of the code above …

How To Manage Padding In CSS
How To Manage Padding In CSS

In addition to declaring the four values ​​above, how to set padding in CSS can also be done using only one value, the condition if it has the same value.

padding: 10px;

The syntax of padding above means that all parts of the element have a distance of 10px between the content and the HTML element in it.

How do you set the padding only for certain parts?

To set just padding certain parts can be done by adding a position to the padding property [position] that you want, for example, the syntax below, namely padding is only given at the top of the element.

padding-top: 10px;

Padding-top is used to determine space in the upper element, for other elements to follow the reference at the beginning of the article, here is each position of the padding in the element.

padding-top: 10px;
padding-bottom: 10px;
padding-left: 10px;
padding-right: 10px;

The codes above will be very useful to determine the padding is only a certain part, although it is not denied that only using the first code can also be done.

Before going forward, there are a number of articles that you might be looking for.

Read too :

Sending
User Review
0 (0 votes)

Add a Comment

Your email address will not be published. Required fields are marked *