Introduction:
Cascading style sheet (CSS) is an encoding of color, spatial interactions and other ways of making HTML attractive and presentable. Margin and padding in CSS are key features in spatial interaction between HTML elements.
Margin and padding:
In CSS (Cascading Style Sheets), they are essential properties used to control the spacing around and within HTML elements. The difference between the two properties is: padding creates space inside an element, between its content and border. While, margin creates space outside the element, separating it from other elements on the page.
Code syntax:
The CSS code are written with the principles referred to as property and value. The properties for margin and padding are aligned in the following directions;
- top
- bottom
- left
- right
Also, the values are measured in the following unit:
- Pixel(px)
- Rem
- Percentage
For further reference read these materials:
- Geek for geek: https://www.geeksforgeeks.org/css/css-padding-vs-margin/
- MDN web docs: https://developer.mozilla.org/en-US/docs/Web/CSS/margin
Code example:
The image below shows a written code of margin and padding styling code.
Code output:
The image below is an output of the code example
