css box model

padding is inner margin.
we can see box. e.g.   border: 1px solid rgba(0, 0, 0, 0.3);
normal padding e.g.   padding: 10px;
Padding is the spacing between a box's content and the borders of the box.

specify e.g.   padding: 5px 10px 5px 10px;

shortcut e.g.   padding: 5px 10px;

more specify e.g.   padding-bottom: 10px;

Padding can be set equally on all sides of the content, or can be set specifically for certain sides of the content only.

margin is between boxes. e.g.   margin: 20px;
Margin is the spacing directly outside of a box's borders.

specify. e.g.   margin: 6px 12px 6px 12px;
shortcut. e.g.   margin: 6px 12px;
more specify. e.g.   margin-right: 15px;
set in the centre. e.g.   margin: auto;
set default. e.g. margin: 0;
  padding: 0;
Margins can be set equally on all sides of a box, or can be set specifically for certain sides of the box only.

it changes the view. e.g.  display: inline;
 , inline, block, inline-block, none.
The display changes the default behavior of HTML elements.

it will only hide element. e.g. visibility: hidden;
, hidden, visible.
The visibility property hides an element, but does not remove the amount of space the element takes up on the page. If you want to hide that element and remove the empty space, use the display property instead.