CSS Property: Padding.
What is Padding?
When you hear of padding what do you think about it? The first time I heard padding as an element in CSS, I envisioned a property responsible for softening the tone or color of a page. Similar, to a soft material like cotton balls that are used to address an injury gently. Hence, I was thinking it was correlated with softening color since cotton balls made injuries visually pleasing with blood. Eventually, I found out I was mistaken, and I interpreted the concept incorrectly.
Padding refers to a CSS property that creates extra space within an element. While margins are responsible for creating space around an element.
The padding creates space between the borders of an element. When creating a webpage you might want to add space between elements. For example, if you are designing a container with an image or text within, and you wanted to add some space between the element and its borders by changing the dimensions of the container, you can utilize padding to resize your element.
Similar to margins, padding can be specified to four sides of an element.
-
- padding-top
- padding-right
- padding-bottom
- padding-left
Padding can be accepted in three different values.
-
- inherit. it specifies the padding that an element should inherit from a parent.
- length. Defines the length of an element’s padding (in px, em, cm, etc.).
- percentage (%). Specifies the padding of an element as a percentage of its parent element’s width.
The example above was meant to showcase, how you can include space within a text element by using pixels to change the padding through a length value. So for a real-world example, I used the bike website to showcase the effects of padding.
You can use padding to create a buffer between your images and other content. In other words, padding gives your images a little breathing room so that they aren’t jammed up against text or other images.
The images below highlight the importance of padding. In the example on left, the text is distractingly close to the image. In the example on the right, padding creates a buffer between the image and the text, which makes for a more pleasant reading experience.
Padding can be utilized in so many ways to bring organization and structure to your page. In turns of the grid layout structure, padding can be used to restructure the text and space around it. Padding is a useful tool when implemented correctly.
Shorthand Property.
To shorten the code, it is possible to specify all the padding properties in one property. The padding property is a shorthand property for the following individual padding properties:
- padding-top
- padding-right
- padding-bottom
- padding-left
Padding and Width
The CSS width property specifies the width of the element’s content area. The content area is the portion inside the padding, border, and margin of an element. So, if an element has a specified width, the padding added to that element will be added to the total width of the element. This is often an undesirable result.