Hey Reader, hope you all are well. Today I decided to talk about some topics of CSS which most people find hard to understand.
Box model
Margin:
The margin is an invisible space around your box. It pushes other elements away from the box. Margins can have positive or negative values.
We can control all margins of an element at once using the margin property, or each side individually using the equivalent longhand properties:
- margin-top
- margin-right
- margin-bottom
- margin-left
Border:
The border is drawn between the margin and the padding of a box. If you are using the standard box model, the size of the border is added to the width and height of the box. To set the properties of each side individually, you can use:
- border-top
- border-right
- border-bottom
- border-left
To set the width, style, or color of all sides, use the following:
- border-width
- border-style
- border-color
Padding:
The padding sits between the border and the content area. Unlike margins, you cannot have negative amounts of padding, so the value must be 0 or a positive value. Padding is typically used to push the content away from the border.
We can control the padding on all sides of an element using the padding property, or on each side individually using the equivalent longhand properties:
- padding-top
- padding-right
- padding-bottom
- padding-left
Position Relative and Absolute
Position: relative
It places an element relative to its current position without changing the layout around it.
Position: absolute
It places an element relative to its parent's position and changing the layout around it.
Comment out the topics which you find hard to understand in CSS.