Скачать или смотреть CSS BOX Model | What is Margin Padding in CSS | How To use Padding and Margin In CSS | Margin in CSS

CSS BOX Model | What is Margin Padding in CSS | How To use Padding and Margin In CSS | Margin in CSS
In CSS, a margin is the space around an element’s border, while padding is the space between an element’s border and the element’s content. Put another way, the margin property controls the space outside an element, and the padding property controls the space inside an element.

Let’s explore margins first. Consider the element illustrated below, which has a margin of 10 pixels:
This means that there will be at least 10 pixels of space between this element and adjacent page elements — the margin “pushes away” its neighbors. If we put multiple of these elements together, we see how margins create whitespace between them, giving them room to breathe:
Uses for Margins
CSS margins determine the space surrounding an element. Therefore, margins can be used to...

Change an Element’s Position on the Page
CSS margins can move an element up or down on the page, as well as left or right. If the width of your page is fixed, centering an element horizontally is simple: Just assign the value margin: auto.
Set the Distance Between Nearby Elements
Margins determine the amount of space between adjacent elements, or whitespace. Whitespace is important for making web pages visually palatable. For instance, use margins to add space between images or between an image and the text description below it:
Overlap Elements
On the flip side, a negative margin value lets you overlap page elements. This can come in handy when trying to achieve a broken grid effect.
Change the Size of an Element
When you increase the padding value, the content will stay the same size, but you will add more space around the content. This is useful for interactive elements, like buttons, when you want to expand the clickable area.

The CSS Box Model
To see how margins and padding work together to set spacing around an element’s content, we can also use the CSS box model. The CSS box model is used for page design and layout. Essentially, every HTML element in a document is wrapped inside a layered box that consists of the margin, border, padding, and content:
css box model,html,css,css tutorial,css3,css tutorial for beginners,What are CSS Margin Padding,padding,margin,css margin,css padding,web development,web design,margin and padding,margin vs padding,how to use padding,margins,margin css,margin padding,margins and padding,how to use margin,padding and margin
CSS BOX MODEL,css box model explained,css box model tutorial,css box model example,learn css box model,box model,css box model fast,css box model explained fast,css box model quick,css tutorial for beginners,the css box model,box model css,web design,css margin,css padding,css box model layout,web development
Applying height and width to your elements is easier once you understand the CSS box model. To ensure proper alignment, you’ll just need to do some simple math. However, if you’re confused about how the box model works, you could end up with a sloppy layout. To learn more about this concept, see our guide to the CSS box model.

CSS Margin vs. Padding vs. Border
The border is the layer of the CSS box model that sits between margin and padding. By default, the border does not have any width, but you can set one with the CSS border property.

Margin and padding are always parts of an element, even if there’s no visible border. This image illustrates such a case: