How CSS BOX modal works ?

In this post we will learn how CSS BOX modal works and below are the details.

• CSS BOX modal consists of margin, border, padding and content
• Content: Content which consists of data like text OR images
• Padding: Padding comes after the content and it adds space after the content
• Border: Border comes after the padding
• Margin: Margin comes after the border
• BOX modal allows to add the space between content and border
• Before adding height and width to any element we should know how BOX modal works.
• Below is the example of BOX modal.

• In the above example we have added below CSS to <div>

.box-modal{  
    background: #b9b1b14a;
    height: 200px;
    width: 200px;
    padding: 20px;
    border: 5px solid #ff8737;
    margin: 20px;
}