WebTrainingRoom Online Courses
Online Training for Asp.net MVC Web Designing Development, MS SQL, Digital Marketing

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
Inside Content : Box Model Example

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

Inside Content : 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
'
Comment
Name Email Website
Subscribe
 
CSS box model, CSS Style, box model css tricks



Consulting