Margin And Padding: Web Design Series: CSS Part 13

margin and padding

Margin And Padding

This is going to be a quick lesson on the margin and padding properties in CSS. We have already worked with these properties in the CSS BOX MODEL lesson, but we’ll use them here in a few more examples so that you fully understand them as you will use these properties very often in web design. The first example code and display pages are below. We are just adding to the code from our previous lesson.

margin and padding blog code 1

margin display 1

There’s some new code and one alteration in the example. The change is in the shorthand border property and is highlighted. I changed the border width value from 2 pixels to 5 so that it’s more visible. We also have a background color for the entire web page. This comes from the body rule that I added at the top of our CSS internal style sheet. The declaration we give to the body rule is background-color: #2f4f4f;. The background-color: property can be used on many other HTML elements as well like headings, paragraphs, ordered or unordered list, div’s, and so on. The value we give it is a hex value that is a shade of blue. Throughout these tutorials, we will be re-using a lot of code that you’ve already learned to help you better remember it.

We’ve added two new declarations to our h2 rule. First, is text-align: center;. And this simply centers our text in our h2 headings. Some other values that could be used here are: left, right, and justified. Justified is similar to center and is what you would commonly see in a printed book. The second declaration added is width: 40%;. This gives our h2 elements a width of 40 percent of the browser window. Percentages are very useful for responsive websites because by specifying in our code that we want our h2 headings to be 40 percent of the browser window, we are ultimately saying that we want it to be 40 percent of whatever the screen size of the device the user is viewing our web page on.

That’s it for the changes in CSS. We left the margin and padding the same. In our HTML code, we added two more h2 headings. By default every HTML element we add is displayed in what is called block format. When we get into positioning, we will talk about this a lot more. In our newly ran page, we can see our h2 heading elements are stacked one on top of another. Even though each of our headings is only taking up 40 percent of the width of the browser; we don’t have two headings displaying side by side. The main reason for that is because we’re displaying our elements in block format. The other thing to take into account is not only how wide we set our elements, but how much margin and padding we specified. Remember the padding is the space between the element content and the border. Then we have the border width and the margin. The margin being the space between the border and the next element or edge of the browser window.

We can see from the example; a padding of 20 pixels between our heading text and the border. It is clear on the top and bottom. The left and right sides have a set width, so the space or distance is greater than 20 pixels. But it’s still there. We will show this in the next example. For the margin, the visible areas we can see are on the top, left, and bottom. If we had three more headings that were lined up to the right of our original h2’s, we would see the margin there as well. The same thing applies under our third heading. Let’s make a few more changes in the next example.

margin and padding code 2

margin and padding 2

We have now reduced the padding to 10 pixels, margin to 40 pixels, and width of our h2 elements to 20 percent of the window. The padding is much easier to see on all four sides of our heading text, but take notice of how all three of our headings are spread over two lines. This is because we reduced the width to 20 percent. So when our text ran out of room; it moved to the next line. The more text we add the more line breaks(new lines) we would end up with. The longest line in the headings clearly show the padding now.

That finishes up the margin and padding lesson. We will use these two properties over and over again as we progress through the CSS tutorial. Thanks for reading; I’ll see you in the next lesson.

Source Code

<!DOCTYPE html>
<html>
<head>
<title>MARGIN AND PADDING</title>
<style>
body{
background-color: #2f4f4f;
}
*{
margin: 0;
padding: 0;
}
h2{
text-align: center;
border: 5px solid red;
padding: 10px;
margin: 40px;
width: 20%;
}
</style>
</head>
<body>
<h2>Welcome to Clear Coded Programming</h2>
<h2>Learn App And Game Development</h2>
<h2>Build And Design Websites</h2>
</body>
</html>

posted by Clear Coded Programming

Please Leave a comment

%d bloggers like this: