Create Box Model design using CSS and HTML

In this post, we will show how to create a simple box in html using CSS and customise it by using different CSS parameters.

<!DOCTYPE html>
<html>
<head>
<style>
div {
    background:#F2F2F2;
    border: 2px solid #FAFAFA;
    box-shadow: 0px 0px 5px 1px #CACACA;
    width: auto;
    height:auto;
    margin:0 auto;
    margin-right:18px;
    float:left;
    padding:20px;

}
</style>
</head>
<body>

<div> This Text is inside box. </div>

</body>
</html>

Above code will create a box with centered text as below,

In above image and looking at CSS code you can notice that, our box has,

  • Background set to #F2F2F2 color
  • Box border is of 2px width using color #FAFAFA
  • Box has a shadow wih color #CACACA
  • Box height and width set to “auto” so it will get adjusted as you change the text inside.
  • Box is aligned to left of the screen, as done using “float:left”
  • Added padding of 20 px (inside distance between text and border) for all 4 sides. Refer to “Understanding difference between Margin and Padding in CSS”

Leave a Comment