--- title: "CSS Color, Margin, and Padding properties Example" description: "CSS Color, Margin, and Padding properties Example" author: "Ashutosh Patel" published: 2025-03-24 updated: 2025-10-24 canonical: https://www.mindstick.com/interview/34011/css-color-margin-and-padding-properties-example category: "css-css3" tags: ["css-css3", "colors", "css property"] reading_time: 5 minutes --- # CSS Color, Margin, and Padding properties Example Here is a simple example that demonstrates the use of CSS properties: `color`, `padding`, and `margin` in an HTML page. ```html CSS Colors, Padding, and Margin

CSS Styling Example

This is a paragraph inside a styled container. We have applied different CSS properties like colors, padding, and margin.

Text with different Margins

Text with Margin top only Text with bottom margin Text with right margin Text with left margin

Text with different Paddings

Text with Margin top only Text with bottom margin Text with right margin Text with left margin
``` ## Explanation `color`: this CSS property change the text color. `background-color`: this CSS property change the background color of HTML elements `margin`: This CSS property is used to add the space from outside of the contents in a specific or all direction `padding`: This CSS property is used to add space inside of the HTML elements in a specific or all directions ## Output ![CSS Color, Margin, and Padding properties Example](https://www.mindstick.com/interviewquestion/bfa13545-acf2-4461-9798-553fe781d482/images/65b5baaa-87d6-4439-b6b3-59226e24d6db.png) Also, Read: [Explain the CSS Custom Properties](https://www.mindstick.com/blog/304343/explain-the-css-custom-properties) ## Answers ### Answer by Ashutosh Patel Here is a simple example that demonstrates the use of CSS properties: `color`, `padding`, and `margin` in an HTML page. ```html CSS Colors, Padding, and Margin

CSS Styling Example

This is a paragraph inside a styled container. We have applied different CSS properties like colors, padding, and margin.

Text with different Margins

Text with Margin top only Text with bottom margin Text with right margin Text with left margin

Text with different Paddings

Text with Margin top only Text with bottom margin Text with right margin Text with left margin
``` ## Explanation `color`: this CSS property change the text color. `background-color`: this CSS property change the background color of HTML elements `margin`: This CSS property is used to add the space from outside of the contents in a specific or all direction `padding`: This CSS property is used to add space inside of the HTML elements in a specific or all directions ## Output ![CSS Color, Margin, and Padding properties Example](https://www.mindstick.com/interviewquestion/bfa13545-acf2-4461-9798-553fe781d482/images/65b5baaa-87d6-4439-b6b3-59226e24d6db.png) Also, Read: [Explain the CSS Custom Properties](https://www.mindstick.com/blog/304343/explain-the-css-custom-properties) --- Original Source: https://www.mindstick.com/interview/34011/css-color-margin-and-padding-properties-example Copyright © MindStick Software Pvt. Ltd. This Markdown version is provided for developers, AI systems, and offline reading.