Box

This lesson discusses the box properties in CSS and how they affect the layout of elements on a web page.

Box

Margin

The margin property is used to set the margin of an element. The margin is the space outside the border of the element and is used to create space between elements.

Item 1
Item 2
Item 3
<div class="container">
  <div class="item">Item 1</div>
  <div class="item">Item 2</div>
  <div class="item">Item 3</div>
</div>

The code above shows an example of the margin property. In this example, the margin of the <div> element is set to 10 pixels, creating space around the element.

Padding

The padding property is used to set the padding of an element. The padding is the space between the content area and the border of the element and is used to create space around the content.

Item 1
Item 2
Item 3
<div class="container">
  <div class="item">Item 1</div>
  <div class="item">Item 2</div>
  <div class="item">Item 3</div>
</div>

The code above shows an example of the padding property. In this example, the padding of the <div> element is set to 10 pixels, creating space around the content.

Border

The border property is used to set the border of an element. The border is the line that surrounds the padding and content of the element and is used to define the visual appearance of the element.

Item 1
Item 2
Item 3
<div class="container">
  <div class="item">Item 1</div>
  <div class="item">Item 2</div>
  <div class="item">Item 3</div>
</div>

The code above shows an example of the border property. In this example, the border of the <div> element is set to 1 pixel solid black, creating a border around the element.

Space Between

The space-between property is used to set the space between elements in a flex container. It distributes the extra space between elements in the container.

Item 1
Item 2
Item 3
<div class="container">
  <div class="item">Item 1</div>
  <div class="item">Item 2</div>
  <div class="item">Item 3</div>
</div>

The code above shows an example of the space-between property. In this example, the justify-content property is set to space-between to distribute the extra space between the elements in the <div> container.

Width and Height

The width and height properties are used to set the width and height of an element. The width and height can be set to a specific size, such as pixels or percentages, or to auto to automatically adjust to the content.

<div class="container">
  <div class="item item1">Item 1</div>
  <div class="item item2">Item 2</div>
  <div class="item item3">Item 3</div>
</div>

The code above shows an example of the width and height properties. In this example, the width and height of the <div> elements are set to 100 pixels, 50%, and auto, creating different sizes for the elements.

Radius

The border-radius property is used to set the radius of the corners of an element. The radius can be set to a specific size, such as pixels or percentages, to create rounded corners.

Item 1
Item 2
Item 3
<div class="container">
  <div class="item item1">Item 1</div>
  <div class="item item2">Item 2</div>
  <div class="item item3">Item 3</div>
</div>

The code above shows an example of the border-radius property. In this example, the radius of the corners of the <div> element is set to 50%, 10 pixels, and 20%, creating different levels of rounded corners.

Box Shadow

The box-shadow property is used to add a shadow effect to an element. The shadow can be set to a specific size, color, and blur radius to create different shadow effects.

Item 1
Item 2
Item 3
<div class="container">
  <div class="item item1">Item 1</div>
  <div class="item item2">Item 2</div>
  <div class="item item3">Item 3</div>
</div>

The code above shows an example of the box-shadow property. In this example, the shadow effect of the <div> element is set to 5 pixels black, 10 pixels red, and 10 pixels blue, creating different shadow effects.

Opacity

The opacity property is used to set the opacity of an element. The opacity can be set to a value between 0 and 1, where 0 is fully transparent and 1 is fully opaque.

Item 1
Item 2
Item 3
<div class="container">
  <div class="item item1">Item 1</div>
  <div class="item item2">Item 2</div>
  <div class="item item3">Item 3</div>
</div>

The code above shows an example of the opacity property. In this example, the opacity of the <div> element is set to 0.5, 0.7, and 0.9, creating different levels of transparency. The higher the value, the more opaque the element.

Code Editor