HTML Padding with CSS “padding” Attribute – POFTUT

HTML Padding with CSS “padding” Attribute

Padding HTML elements provide a better and smoother user experience from the design point of view. HTML elements can be padded by using CSS styling. In this tutorial, we will learn how to pad with CSS for different or all sides of the HTML element.

CSS padding Syntax

The HTML padding is provided by the padding CSS attribute. We can use the padding attribute as separately or inside the HTML element style attribute.

  • padding is the attribute name that can take single or multiple PADDING_VALUES.
  • PADDING_VALUES can be single or multiple values up to 4. All different count of values will have different padding implementation which will be explained below example.

Padding with Single Value (top/right/bottom/left)

We will start with simple steps where we will provide a single value to the padding CSS attribute where this value will be used for all 4 sides padding length.

Padding with Single Value

Padding with Single Value

Padding with 4 Values (top,right,bottom,left)

We can also provide 4 values for each side of the HTML element padding value. In this example, we will provide padding values 10px 20px 30px 40px and 50px 70px 90px 110px.

Padding with 4 Values

Padding with 4 Values

Padding with 3 Values (top, left/right,bottom)

We can also provide 3 values where the first value for top padding, the second value for right and left padding and the third value for the bottom padding.

Padding with 3 Values

Padding with 3 Values

Padding with 2 Values

When we provide 2 values to the padding CSS attribute the first value will be used for top and bottom sides and the second value will be used for right and left sides padding.

Padding with 2 Values

Padding with 2 Values

Padding with Percentage Value Type

Up to now, we have used the px which is pixel short form for padding values. We can also use the percentage where the parent element sizes percentage is used for padding.

echo '
'

Padding with Percentage Value Type

Padding with Percentage Value Type

Padding with em Font Size

Another padding size unit is em which is related to the font size. 1 em is equal to a one letter size.

Padding with em Font Size

Padding with em Font Size

Using Multiple Units For Single Padding

We have learned that we can use different units like px,%, em in order to set padding sizes. We can use all of these padding units in a single padding example.

Using Multiple Units For Single Padding

Using Multiple Units For Single Padding

Padding As Inline CSS Inside HTML Element Style Attribute

We can also use CSS inline attribute features which are used with HTML style attribute. Below we will set a single value for padding as inline CSS.

Padding As Inline CSS Inside HTML Element Style Attribute

Padding As Inline CSS Inside HTML Element Style Attribute

Padding For Top Side

CSS also provides specific side padding attributes. padding-top is used for only padding for the top side. padding-top CSS attribute can be also used with padding and other padding attributes that will be explained below.

Padding For Top Side

Padding For Top Side

Padding For Right Side

We can pad only for the right side with the padding-right CSS attribute like below.

Padding For Right Side

Padding For Right Side

Padding For Bottom Side

We can use padding-bottom in order to pad for only the bottom side.

Padding For Bottom Side

Padding For Bottom Side

Padding For Left Side

We can use padding-left CSS attribute in order to set HTML element left side padding value.

Padding For Left Side

Padding For Left Side

Leave a Reply

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