Margins and Padding
Margins and padding are very important for maintaining the appearance of a webpage or a website. Margins and padding control Border (Edge around the box), Margin (Empty space outside each structure such as header, navigation, side bar, footer and main conternt), Padding( Empty space inside the border), Width (Width of the content inside the structure) and Height( Height of the content area inside the structure).
Here's a picture of the various components of the structure of a typical webpage:
Margins and padding are coded in CSS. There are several ways to determine margins and padding in CSS.Here are some properties to be used in CSS. In each case, replace value with a number followed by a unit of measure, such as px for pixels or % for percent:
| CSS Property/Value | What It Does |
|---|---|
| margin-top:value | Top Margin |
| margin-right:value | Right Margin |
| margin-bottom:value | Bottom Margin |
| margin-left:valuee | Left Margin |
| padding-top:value | Top Padding |
| padding-right:value | Right Padding |
| padding-bottom:value | Bottom Padding |
| padding-left:valueue | Left Padding |
Important Note
If you want to provide the same value to all sides of margin and padding, you need to do it only once as shown here:margin:10px
Similarly, this one line of code sets the padding to 5 pixels all the way around so you don't have to type four lines of code:padding:5px
You can also apply two values simultaneously such as:padding:5px 15px When you provide two values, the first one applies to the top and bottom. The second value applies to the sides.
Automatic Setting of Values
In case you want to set the marginn of a structure element automatically, you may write:margin:1px auto. In this case, your top and bottopm margins will be set to 1px and side margins will be set automatically to align it horizontally.
Setting Widths and Heights
All structure elements need to have have a width and a height. If we do not set a value to them, it assumes a default value of 100% meaning it covers the entire size of the element of the structure. When you want to override the default width, use the CSS width: property with this syntax:width:value.
Here is an example of how we set height and border radii in the illustration web page in our course (refer to CSS Addendum Section):
Rounded Corners
Unless we write special rules in CSS, the corners around strucrure elements will show as right angles. A rounded corner instead of a right angle needs property and value that can be represented by border-radius:length. Below is an example how the rounded corner will look like by giving different values for length:
The value of length determines the height and width of the corner. For example, providing value of length as 30px means each corner's rounding will be 30px tall and 30px wide. Similarly, border-radius:15px will mean that rounding will be 15px tall and 15px wide.
I hope this gives you a better understanding of margins and padding. Try to experiment with different example of properties and values to get a better handle on this topic.