interview

home / developersection / interviews / css color, margin, and padding properties example

Ask Question
Ashutosh Kumar Verma

Ashutosh Kumar Verma

Follow

Hi! This is Ashutosh Kumar Verma. I am a software developer at MindStick Software Pvt Ltd since 2021. I have added some new and interesting features to the MindStick website like a story section, audio section, and merge profile feature on MindStick subdomains, etc. I love coding and I have good knowledge of SQL Database.

Can you answer this question?
Answer

1 Answers

Ashutosh Kumar Verma

Ashutosh Kumar Verma

24-Mar-2025

Here is a simple example that demonstrates the use of CSS properties: color, padding, and margin in an HTML page.

<!DOCTYPE html>
<html lang="en">
<head>
   <meta charset="UTF-8">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <title>CSS Colors, Padding, and Margin</title>
   <style>
       /* Applying Colors */
       body {
           background-color: #f4f4f4; /* Light gray background */
           color: #333; /* Dark gray text */
           font-family: Arial, sans-serif;
       }
       .container {
           background-color: white; /* White background for the content */
           color: black; /* Black text */
           padding: 20px; /* Adding space inside the container */
           margin: 50px auto; /* Centering the container with top & bottom margin */
           width: 80%; /* Setting width */
           border-radius: 10px; /* Rounded corners */
          
       }
       .heading {
           color: #007BFF; /* Blue color for heading */
           margin-bottom: 15px; /* Space below the heading */
       }
       .paragraph {
           padding: 10px; /* Inner spacing */
           background-color: #e9ecef; /* Light gray background */
           border-left: 5px solid #007BFF; /* Blue left border */
       }
       h3{
        color: blue;
       }
       .margin-text span {
     border: 1px solid black;
     display: inline-block; /* Allow margins to take effect */
     padding: 5px; /* Optional: Add padding for better visibility */
 }
 .margin-text .top-margin {
     margin-top: 40px;
 }
 .margin-text .bottom-margin {
     margin-bottom: 40px;
 }
 .margin-text .right-margin {
     margin-right: 40px;
 }
 .margin-text .left-margin {
     margin-left: 40px;
 }
   .padding-text span {
     border: 1px solid black;
     display: inline-block; /* Allow margins to take effect */
     padding: 5px; /* Optional: Add padding for better visibility */
 }
 .padding-text .top-padding {
     padding-top: 40px;
 }
 .padding-text .bottom-padding {
     padding-bottom: 40px;
 }
 .padding-text .right-padding {
     padding-right: 40px;
 }
 .padding-text .left-padding {
     padding-left: 40px;
 }
   </style>
</head>
<body>
   <div class="container">
       <h2 class="heading">CSS Styling Example</h2>
       <p class="paragraph">
           This is a paragraph inside a styled container. We have applied different CSS properties like colors, padding, and margin.
       </p>
       <h3>Text with different Margins</h3>
       <table class="margin-text">
         <tr class="table-row">
          <td><span class="top-margin">Text with Margin top only</span></td>
          <td><span class="bottom-margin">Text with bottom margin</span></td>
          <td><span class="right-margin">Text with right margin</span></td>
          <td><span class="left-margin">Text with left margin</span></td>
         </tr>
       </table>
       <h3>Text with different Paddings</h3>
       <table class="padding-text">
         <tr class="table-row">
          <td><span class="top-padding">Text with Margin top only</span></td>
          <td><span class="bottom-padding">Text with bottom margin</span></td>
          <td><span class="right-padding">Text with right margin</span></td>
          <td><span class="left-padding">Text with left margin</span></td>
         </tr>
       </table>
   </div>
</body>
</html>

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

 

Also, Read: Explain the CSS Custom Properties

 

Liked By

We use cookies to ensure you have the best browsing experience on our website. By using our site, you acknowledge that you have read and understood our Cookie Policy & Privacy Policy