Others


Others


Box Properties - CSS


CSS Box Properties are used to set margin, padding, height, width and floating of the selected element.

Property Description Values Example
width Defines width of the element. length (px , in , cm, mm, pt), percentage(%) 
div{
  width:100px;
  background-color:#ccc;
}
height Defines height of the element. length (px , in , cm, mm, pt), percentage(%) 
div{
  height:100px;
  background-color:#ccc;
}
float Allows to wrap text around an element and place it left or right side of its parent element. none, left, right. 
img{
  height:100px;
  width:100px;
  float:right;
}
Clear Specifies that which side of floating elements are not allowed to float. none, left, right, both 
p{
  clear:both;
}
margin Sets the margins of selected element. auto, length, percentage(%). 
div{
  margin:20px;/*all side margin 20px*/ 
}

div{  
  margin:15px 20px; 
  /*
    top and bottom margin 15px 
    left and right margin 20px 
  */
}

div{
  margin:5px 7px 10px 12px; 
  /*
    top margin 5px 
    right margin 7px 
    bottom margin 10px 
    left margin 12px
  */
}
margin-left Sets the left margins of selected element. auto, length, percentage(%). 
div{
  margin-left:20px;
}
margin-top Sets the top margins of selected element. auto, length, percentage(%). 
div{
  margin-top:20px;
}
margin-right Sets the right margins of selected element. auto, length, percentage(%). 
div{
  margin-right:20px;
}
margin-bottom Sets the bottom margins of selected element. auto, length, percentage(%). 
div{
  margin-bottom:20px;
}
padding Defines the space between content and its border. length, percentage 
div{
  padding:20px;/*all side padding 20px*/ 
}

div{  
  padding:15px 20px; 
  /*
    top and bottom padding 15px 
    left and right padding 20px 
  */
}

div{
  padding:5px 7px 10px 12px; 
  /*
    top padding 5px 
    right padding 7px 
    bottom padding 10px 
    left padding 12px
  */
}
padding-left Defines the space between content and its left border. length, percentage(%). 
div{
  padding-left:20px;
}
padding-top Defines the space between content and its top border. length, percentage(%). 
div{
  padding-top:20px;
}
padding-right Defines the space between content and its right border. length, percentage(%). 
div{
  padding-right:20px;
}
padding-bottom Defines the space between content and its bottom border. length, percentage(%). 
div{
  padding-bottom:20px;
}
box-sizing Sets total width and height of elements include padding and borders. content-box, border-box 
div{
  height:100px;
  width:100px;
  padding:20px;
  border:5px solid #ccc;
  box-sizing:border-box;
}
1. Width, Height 
div{
  height:100px;
  width:100px;
  background-color:#a1d4e6;
}
Try it Yourself
2. Clear 
div{
  height:50px;
  width:50px;
  background:#a1d4e6;
  float:left;
}
p{
  clear:both;
}
Try it Yourself

It had become a far too common an event in her life. She has specifically placed the key to the box in a special place so that she wouldn't lose it and know exactly where it was when the key was needed.

3. Margin 
div{
  height:100px;
  width:100px;
  background-color:#a1d4e6;
  margin-left:25%;
}
Try it Yourself
4. Padding 
div{
  height:auto;
  width:230px;
  padding:20px 25px;
  background-color:#a1d4e6;
  text-align:justify;
}
Try it Yourself
It had become a far too common an event in her life. She has specifically placed the key to the box in a special place so that she wouldn't lose it and know exactly where it was when the key was needed.
5. Box Sizing 
div{
  height:auto;
  width:230px;
  padding:20px 25px;
  background-color:#a1d4e6;
  text-align:justify;
  box-sizing:border-box;
}
Try it Yourself
It had become a far too common an event in her life. She has specifically placed the key to the box in a special place so that she wouldn't lose it and know exactly where it was when the key was needed.