It is important to become comfortable with the basic CSS properties, “margin” and “padding”. All “block elements” have both margin and padding properties that affect the way those elements sit in relation to the elements nearby them.
This is probably best understood from a diagram. In the following diagram, we see three block elements (elements that are rectangular in shape), one inside the other. We are only concerning ourselves with the properties of the yellow element in this example, in order to keep the discussion simple.
Red arrows indicate the margins of the yellow element, and the green arrows represent the padding of the yellow element
You can see that the margins, represented by red arrows, are the spacing between the outer edge of the yellow element and the inner edge of its parent element (the element that contains it). Increasing the yellow element’s margins will increase this spacing, decreasing the yellow element’s margins decreases this spacing.
Similarly, the padding, represented by green arrows, is the spacing between the inner edge of the yellow element and the outer edge of the element nested inside of it. Like the margins, the padding can also be adjusted using CSS.
Margins and padding do not have to be equal on all sides. View the CSS margin examples and padding examples on the W3Schools site to see how margins and padding can be set individually for each side.
No related posts.