Categories

Featured templates

CSS. Understanding border, margin and padding properties

Chris Diaz November 24, 2011
Rating: 3.9/5. From 15 votes.
Please wait...

This tutorial will help you to better understand the border, padding and margin CSS properties. These properties helps much the web developers to arrange the elements on the web-page the needed way.

Let’s create some div and assign the margin, padding and border properties.

Padding property

The CSS padding properties define the space between the element border and the element content. You can define the padding value the following way:

  • padding-top: 10px;
  • padding-right: 10px;
  • padding-bottom: 10px;
  • padding-left: 10px;

You can also use the shortand property:

  • padding:25px 50px 75px 100px;
    • top padding is 25px
    • right padding is 50px
    • bottom padding is 75px
    • left padding is 100px

  • padding:25px 50px 75px;
    • top padding is 25px
    • right and left paddings are 50px
    • bottom padding is 75px

  • padding:25px 50px;
    • top and bottom paddings are 25px
    • right and left paddings are 50px

  • padding:25px;
    • all four paddings are 25px

Note: the padding value is added to the element width and is affected by the element background.

In other words we have the element div with class div-1:

div.div-1{
width:150px;
padding: 25px;}

The browser with add the left and right padding values to the box width. As a result you’ll see the box that’ll be of 200px width.

Border property

The CSS border properties allow you to specify the style and color of an element’s border.

border-width

The border-width property is used to set the width of the border. The width is set in pixels, or by using one of the three pre-defined values: thin, medium, or thick.

border-color

The border-color property is used to set the color of the border. The color can be set by:

  • name – specify a color name, like “red”
  • RGB – specify a RGB value, like “rgb(255,0,0)”
  • Hex – specify a hex value, like “#ff0000”

border-style

  • dotted: Defines a dotted border
  • dashed: Defines a dashed border
  • solid: Defines a solid border
  • double: Defines two borders. The width of the two borders are the same as the border-width value
  • groove: Defines a 3D grooved border. The effect depends on the border-color value
  • ridge: Defines a 3D ridged border. The effect depends on the border-color value
  • inset: Defines a 3D inset border. The effect depends on the border-color value
  • outset: Defines a 3D outset border. The effect depends on the border-color value

Using the shortand property you can define the element border the following way:

div.div-2{
	border:1px solid #ccc;
    }

Margin property

The CSS margin properties define the space around elements. The margin clears an area around an element (outside the border). The margin does not have a background color, and is completely transparent.

You can define the element margin values the following way:

  • margin-top:100px;
  • margin-bottom:100px;
  • margin-right:50px;
  • margin-left:50px;

You can also use the shortand property:

  • margin:25px 50px 75px 100px;
    • top margin is 25px
    • right margin is 50px
    • bottom margin is 75px
    • left margin is 100px

  • margin:25px 50px 75px;
    • top margin is 25px
    • right and left margins are 50px
    • bottom margin is 75px

  • margin:25px 50px;
    • top and bottom margins are 25px
    • right and left margins are 50px

  • margin:25px;
    • all four margins are 25px

Using the auto value for the margin property you can center the block horizontally.

div.div-3{
	margin: 0 auto;
    }

If you want to know more about templates with CSS functionality, browse our Bootstrap Admin Themes.

This entry was posted in Working with CSS and tagged border, css, margin, padding. Bookmark the permalink.

Submit a ticket

If you are still unable to find a sufficient tutorial regarding your issue please use the following link to submit a request to our technical support team. We'll provide you with our help and assistance within next 24 hours: Submit a ticket