PADDING VS MARGIN: BATTLE BETWEEN CSS PROPERTY

#css #csspadding #cssmargin #webdev

When I began my journey to master the ways of CSS, I stumbled upon a daunting section that made me feel as though I had lost my way: the CSS Box Model, which encompasses both Padding and Margin. Though the tutorial made it seem simple, once I delved into actual projects, I realized that distinguishing between the two could be perilous. Many tutorials utilize both properties, and it’s all too easy to confuse them.

But fear not, dear reader! In this article, I shall shed light upon the meaning of Padding and Margin, and provide you with the tools to discern between them with ease. However, before we proceed, we must pay homage to the lord of them all: the Box-Model.

(Hope you love my English? 😂)

What is CSS Box-model?

The Box-Model in CSS is a structure that displays the appearance of a web page. It arranges HTML elements into boxes, with content such as text, images, videos, and links in the center. Padding and margin wrap around the content, creating a pleasant and inviting look for the user. The CSS Box Model defines the space between elements and sets the width and height of an element for all browsers. Now, what distinguishes Padding from Margin in CSS?

The difference in CSS padding and margin.
First, we will define what CSS padding and margin is all about.

CSS Padding

Padding refers to the space between an element’s content and its defined border. It can be applied to the element’s top, right, bottom, and left sides individually or to the element as a whole to create more room within an element. This can be achieved with the use of padding properties, e.g:

Padding-top
Padding-bottom
Padding-left
Padding-right The main units of measurement in padding are px, em, rem, and %. You can press Ctrl + spacebar to find more units.

As I said earlier, you can add padding to a particular side of the element (top, bottom, left and right).

_ What about a case where you want to add a padding effect to different parts of an element without having to be listing the properties one after the other?_

Guess what? It can be done. It can also be seen as a short form of padding.

Padding: _a_px; signifies padding effect to all sides of the element.
Padding: _a_px _b_px; signifies padding at the top and bottom, then the left and right side of the element.
Padding: _a_px _b_px _c_px; signifies padding at the top, left and right, and the bottom part of the element.
Padding: a_px _b_px **_c**px _d_px; signifies padding at the top, right, bottom, and left part of the element, respectively.

Let me give you a practical example of what I mean about padding.

When the padding of an HTML element is set to 30px, what do you think the result should be?

The text is away from the line of the border, with a 30px gap at all sides. It gives an indent and what looks like a proper paragraph to the text to make it look pleasant to the user’s eye. The box is close to the browser tab but the content is in the middle of the border box. As the figure for padding increases, the space in the box increases to fit the input while the font remains the same. In summary, Padding is between the textbox and the text itself.

We got what padding is, what about margin?

CSS Margin

Margin in CSS is the space between the content and where the browser window is located. Like CSS padding, margin also have properties that can be applied to any side of the element.

Shorthand margin properties that can be used are:

Margin-top
Margin-bottom
Margin-left
Margin-right

The main units of measurement are em, px, rem, and %. The properties can be shown when you press Ctrl+space-bar.

What if you wanted to apply margin effects to various parts of an element without having to list each property one by one? It can be done also!

Margin: _a_px; signifies margin effect to all sides of the element.
Margin: _a_px _b_px; signifies margin at the top and bottom, then the left and right side of the element.
Margin: _a_px _b_px _c_px; signifies margin at the top, left and right, and the bottom part of the element.
Margin: _a_px _b_px _c_px _d_px; signifies margin at the top, right, bottom, and left part of the element.

What about a practical example on margin?

The result:

What do you notice?

The content is further away from the browser tab and touching the line of the border box. As you increase the margin figure, the box continues to move further away from the browser window. There is no spacing within the border, there is spacing between the browser window and the text. That’s margin in CSS.

USES OF CSS PADDING AND MARGIN.

CSS PADDING:

Creating background colour: An HTML element’s padding region will be filled with the background colour you choose when you apply padding and background colour to the element. As a result, the element’s information is surrounded by the appearance of a frame. As an illustration, let’s say you have a div element with some text inside and you want to add a backdrop colour while maintaining a space between the text and the border. You can do this by giving the div element padding and then changing the hue of its background.
Creating hover effects: A button or link that appears to grow or contract when hovered over can be produced by adding padding to an element and then changing its background colour on hover.
Creating whitespace: Padding can be used to separate an element’s content from its border, making the content easier to read and more aesthetically appealing.
Separating elements: Padding can also be used to make space between components that are next to each other. You can distinguish the two components visually by adding padding to one or both of the elements.

CSS MARGIN

Adjusting layout: A margin can be used to modify a page’s layout, such as by adding columns or changing the distance between components.
Adjusting elements: Elements can be aligned in a variety of ways using a margin, such as by matching a collection of elements either horizontally or vertically. CSS margin can be used to align elements in 2 different ways, if the value of margin left and right, margin top and bottom, is set to auto, it causes the element to be centered horizontally and vertically. If the margin is given a value, of 20px, the will create an equal spacing of the value between each element.

*CONCLUSION
*
Padding and margin in CSS are as important as any other property. It may be perceived as the most important property in CSS because it deals with the presentation of the elements on a website.

The margin doesn’t affect the content or anything within it. It focuses on the border and the browser window. It can also be used to space out two close elements. When you set the value of the margin to 10px, the content stays 10px away from the adjacent content.

Unlike padding, which affects the border and the content or text within it. As the amount of padding increases, the space within the border increases around the content.