The width property sets the width of a “box” (or other element).
.class-name{
width:800px;
}
The height property sets the height of a “box” (or other element).
.class-name{
width:800px;
height:400px;
}
The min-height property sets the minimum height of a “box” (or other element). If the content requires more space, the box will expand to accommodate it.
.class-name{
width:800px;
min-height:400px;
}
The padding property adds space to the inside of a “box” (or other element).
Using padding adds on to the total width of your box unless you also use box-sizing:border-box;. In this example, the total width of the box is 820px. 800 pixels for the width and then 10 pixels of padding on each side.
.class-name{
padding:10px;
width:800px;
}
You can specify the padding for each side of the box if you need to control it individually. This syntax also works for border and margin:
.class-name{
padding-top:10px;
padding-right:5px;
padding-bottom:15px;
padding-left:5px;
}
In addition, you can use the shorthand version of this by setting the values all on one line:
.class-name{
padding:10px 5px 15px 5px;
}
The first number is for the top value and then moves clockwise — top, right, bottom, left. This syntax also works for margin.
Lastly, you can supply just two values. The first is for the top and bottom. The second is for the left and right sides.
.class-name{
padding:10px 5px;
}
The border property adds a border around a “box” (or other element).
Using border adds on to the total width of your box unless you also use box-sizing:border-box;. In this example, the total width of the box is 810px. 800 pixels for the width and then 10 pixels of border on each side.
.class-name{
border:5px solid black;
width:800px;
}
You can also control the border for each side of the box/element individually using the same syntax noted above for padding.
The margin property adds space around the outside of a “box” (or other element). Margin does not affect the size of your box.
.class-name{
width:800px;
margin:50px;
}
You can also control the margin for each side of the box/element individually and use shorthand using the same syntax noted above for padding.
The box-sizing property allows us to include the padding and border in a box’s (or other element's) total width and height.
.class-name{
box-sizing:border-box;
width:500px;
padding:10px;
}
In this example, the entire width of the box is 500px. When you don’t specify this property the default is content-box.
To center a div within its “container” (or the box that it is inside) you can do this:
.class-name{
margin:0 auto;
}
The first value is for the top and bottom of the box (no margin in this example), and the second value is for the right and left. A value of auto means the browser calculates the margin.
Just keep in mind that the width of the box that you want to be centered will need to be smaller than its container.
To horizontally align content within a block-level element (<div>, <p>, <h1>, etc.) use:
.class-name{
text-align:center;
}
Other values are left, right, and justify (this last one only if it is text).