CSS Box Model
Padding, Borders, and Margins

• Padding : Padding refers to the space between the content of an element and its inner edges. It creates an internal space within the element, separating the content from the element's border. Padding can be applied individually to each side (top, right, bottom, left) or as a shorthand property.


• Borders : Borders are lines or outlines that surround the content and padding of an element. They provide a visual boundary for the element. Borders can have different styles (solid, dashed, dotted, etc.), widths, and colors. Like padding, borders can be set individually for each side or using shorthand properties.


• Margins : Margins are the space outside the element, creating a gap between the element and adjacent elements. They determine the distance between an element and its neighboring elements. Like padding and borders, margins can be set individually for each side or using shorthand properties.

The combination of padding, borders, and margins within the CSS Box Model allows designers to control the spacing and layout of elements on a web page. Understanding and manipulating these properties are essential for creating visually appealing and well-structured web layouts.

• Step 1 : Open the html editor ,Identify the element you want to add padding to. For example, consider a <div> element.
• Step 2 : In the CSS code area, use the padding property to set the padding value. You can specify it individually for each side or use the shorthand property. For instance:

Edit Copy Hide

div {
  padding: 10px; /* applies 10px padding to all sides */
}

Or

Edit Copy Hide

div {
  padding-top: 10px;
  padding-right: 20px;
  padding-bottom: 10px;
  padding-left: 20px;
}

• Step 3 : Paste the css style to your HTML document.
• Result : The <div> element will have a padding of 10 pixels on all sides or individually on each side (top, right, bottom, left) as specified.

• Step 1 : In the html editor , Select the element you want to add a border to. Let's use a <p>Test</p> paragraph element as an example.
• Step 2 : In the CSS code area, use the border property to set the border style, width, and color. For instance:

Edit Copy Hide

p {
  border: 1px solid black;
}

• Step 3 : Paste the css style to your HTML document.
• Result : The <p> paragraph element will have a solid black border with a width of 1 pixel.

• Step 1 : In the html editor , Identify the element you want to add margins to. Consider an <h1>Test</h1> heading element in this example.
• Step 2 : In the CSS code area, use the margin property to set the margin value. You can specify it individually for each side or use the shorthand property. For example:

Edit Copy Hide

h1 {
  margin: 20px; /* applies 20px margin to all sides */
}

Or

Edit Copy Hide

h1 {
  margin-top: 10px;
  margin-right: 20px;
  margin-bottom: 30px;
  margin-left: 40px;
}

• Step 3 : Paste the css style to your HTML document.
• Result : The <h1> heading element will have a margin of 20 pixels on all sides or individually on each side (top, right, bottom, left) as specified.

By using these examples, you can adjust the padding, borders, and margins of different elements in your web page to achieve the desired spacing and layout. Remember to customize the values according to your specific design requirements.