CSS padding allows setting default dead space outside an HTML element, saving repetition and creating coherence. Five types of padding properties exist, including shorthand. Values can be pixels, points, inches, or percentages. Padding can be done one side at a time using padding-top, padding-right, padding-bottom, and padding-left. Padding can be declared for a class or all paragraphs.
CSS padding allows an HTML encoder to set the default padding or dead space outside an HTML element. The benefit of doing this is that it saves the programmer from repeating that padding code for every instance of that element and more easily creates coherence in the page. The HTML element to fill can be any number of things, such as a paragraph, table, or header.
To create padding in CSS, you first need to identify the HTML element you want to fill. This element that you want to fill is known as a selector. So, we recommend that you specify the appropriate padding values. There are five different types of padding properties in CSS: one for all four sides of an element at once, and another four for each individual side of the element (for example, the left side, right side, top side, or side inferior ). A property that allows the programmer to specify values for all four sides of an HTML element at once is called a shorthand property.
The coding language used to specify a CSS padding declaration is simply the word “padding”. This label is followed by the relative padding “values”, that is, information on the desired amount of space, usually represented by pixels or a percentage. Padding and values are written inside braces or braces (for example, “{” and “}”). Preceding all of this is the HTML element to fill (for example, “p” for paragraph or “H2” for level 2 headings).
In terms of how value is represented, values can be represented in pixels (e.g. 1px or 5px), points (e.g. 1pt or 5pt) or inches (e.g. 1in or 5in) or centimeters (e.g. 1cm or 5cm) . Values can also be declared as a percentage of the HTML element being styled. For example, if the value is 50%, the padding will be equal to half the element’s size.
The following examples are the HTML code for padding an HTML element using values that are reflected in a percentage and length, respectively. If only one value is assigned, web browsers will assign this padding to all four sides of the HTML element.
padding:10%;
padding: 100px;
Adding more values to the above padding declaration type will cause web browsers to interpret them a certain way. If two values are assigned, the first will correspond to top and bottom, and the second will correspond to left and right. Three values will cause the first to refer to the top, the second to the left and right sides, and the third to the bottom of the HTML element. By assigning the maximum of four values, the first, second, third and fourth values correspond to the top, right, bottom and left of the HTML element, in that order. When more than one value is supplied, they must be separated by spaces and terminated with a semicolon, for example:
padding: 10px 20px 10px 20px;
Padding in CSS can also be done one side at a time. In this regard, four other padding properties are available. These are padding-top, padding-right, padding-bottom and padding-left. To create padding in CSS in this more precise way, you’ll need to label properties with the same shorthand declaration syntax as above. Each of these padding properties only accepts a length or percentage value. For example:
padding-top: 10px;
padding-right:20px;
padding-bottom: 10px;
padding-left: 20px;
The following code creates a web page, declares padding properties between style tags, and then uses them in a paragraph element specified by the p tag. The text between /* and */ are notes to explain the type of padding employed and would not be included in the CSS padding code.
This text has the same padding on each side. The padding on each side is 10px.
This text has a top and bottom padding of 50px and a left and right padding of 30px.
This text has 10px top padding, 20px right padding, 10px bottom padding, and 20px left padding.
In the example above, “example1”, etc., are names assigned to a class, which are then referenced in paragraphs. The dot between the p tag and the class names at the beginning of the code denotes a declaration of a class assigned to a paragraph. Note the curly braces after the class declaration enclosing the padding property value assignments.
While this may seem like a lot of work, it’s much less fiddly than specifying the padding for each individual paragraph. You can declare a padding property for the desired element, which in the example above is the p tag, and then reference the class when using the element between the page’s body tags. If you need only one fill type for all paragraphs, you don’t need to use classes. Simply use the following code between your style tags, then encode your paragraphs without specifying any classes. This code would go between body tags instead of the code in the example above.
p {padding:10px 20px 10px 20px;}
This CSS padding this would create would affect all paragraphs even if no class was specified.
Protect your devices with Threat Protection by NordVPN
