Css Padding

CSS Padding:

The padding property is defined for the space between the inner part of the element and its border.

It can be applied to different HTML tags to provide both vertical and horizontal margin in these items.

Equal Padding on All Sides:

Adds equal padding on all sides of an element.

                          
                            div {
                                padding: 10px;
                            }

Different Padding on Each Side:

Sets different padding values for each side of an element.

                          
                            section {
                                padding-top: 20px;
                                padding-right: 15px;
                                padding-bottom: 10px;
                                padding-left: 5px;
                            }

Shorthand for All Sides:

You can use the shorthand padding property to set padding for all sides in one declaration.

                          
                            article {
                                padding: 15px 10px; /* top/bottom: 15px, right/left: 10px */
                            }

Percentage Padding:

Padding can be specified as a percentage of the width of the containing element.

                          
                            img {
                                padding: 5%;
                            }

Em Padding:

Padding can also be specified in em units, which are relative to the font-size of the element.

                          
                            p {
                                padding: 0.5em;
                            }

Padding with Box Sizing:

When using box-sizing: border-box case, padding figure in to the element's total width and height.

                          
                            div {
                                box-sizing: border-box;
                                width: 200px;
                                padding: 10px;
                                border: 2px solid #3498db;
                            }

To sum up, the following examples depict the padding attribute which helps to alter the gap within the HTML elements.

Start with the values you require, then make amends!