How to create CSS Box Model style

CSS Box Model Style

CSS Box Model is a container that has multiple css properties like border, margin, and padding, so the Box Model look depend on what values we set for each above property

Let's create some Box Model using CSS Style to understand the impact of each property

Box Model Examples

So to create some perfect example of Box Model, we use all following properties

• Border
• Margin
• Padding
• Inside Content

Here is the code for CSS Style Box Model

.boxModel1 {
    width: 300px;
    border: 25px solid red;
    border-radius:15px;
    padding: 50px;
    margin: 20px;
}

box model shadow example

Here is the css code for box model shadow effect

.boxModel2 {
    background-color: #fff;
    width: 300px;
    box-shadow: 20px 20px 10px grey;
    border: solid 1px #808080;
    padding: 50px;
    margin: 20px;

}

The above effect has following properties

• h-offset
  Required field, The horizontal offset of the shadow
• v-offset
  Required field, The vertical offset of the shadow
• blur
  Optional field, increase the number, to see more blurred
• spread
  Optional field, positive value increases the size of the shadow
• color
  Optional field, default value is the text color