padding
The space between the contents of a box and the borders of a box is konwn as padding.
exmaple:
padding: 10px;
or
padding: 5px 10px 5px 10px; ( top right bottom left )
or
padding: 5px 10px; ( top& bottom left& right)
or
padding-top
padding-right
padding-bottom
padding-left
-------------------------------------------------------------------------------------------------------------------
margin
The margin refers to the sapce directly outside of the box. We can adjust this spacing with the margin property.
exmaple:
margin: 20px;
or
margin: 6px 12px 6px 12px; ( top right bottom left )
or
margin: 6px 12px;
or
margin-top
margin-right
margin-bottom
When margin: auto is uesd, anelements will center relative to its container. But the width of div must be less than the width of the class body.
-------------------------------------------------------------------------------------------------------------------
The code in the example above resets the default margin and padding values of all HTML elements.It is often the first CSS rule in an exernal stylesheet.
exmaple:
*{
margin: 0;
padding: 0;
}
-------------------------------------------------------------------------------------------------------------------
dispaly
Modifying the display property of an element can help achieve a desired layout for a web page. The dispaly property can take on one of four values:
inline - cause block-level elements(like a div) to behave like an inline element (like a link)
block - cause inline elements(like a link)t to behave like a block element (like a div)
inline-block - causes block-level elements to behave like an inline element, but retain the feature of a block-level element.
none - removes an element form view. The rest of the web page will act as if the element does not exit
In the example above, the block-level list items will now behave as inline elemnets. The result will be list items appearing on the same line, like a navigation bar.
-------------------------------------------------------------------------------------------------------------------
visibility
The visibility property can be set to one of the following values:
hidden - hides an element.
visible - displays an element.
Notice:
What's the difference between display: none and visibility: hidden ?An element with display: none will be completely removed from the web page. An element with visibility:hidden ,however, will nor be visible on the web page, but the space reserved for it will. But all that still can view the contents of the list item by viewing the source code in their browser.