Get some practice working with padding, margin, and border in this exercise.
- Without inspecting each element with developer tools, it can be hard to distinguish between margin and padding. Adding a background color or border to an element can help. I'll add both to the paragraph in the span. Now, let's add padding just to the block element. The paragraph. I'm using one value so that means I'll be adding the same amount of padding on all four sides. The background color will expand to include the padding since it adds space within the element but around the content box. It also makes the total size of the element bigger. The background color doesn't expand into the margin area. That's because margin adds space around the element. So if you see some space between the elements that the background color doesn't include, you can safely assume that the space is created by margin. While margin isn't included in the total size of the element. It does push all the surrounding elements away, so it is included in the total area that the element occupies. In the last lesson, we looked at a behavior called Margin Collapsing. This space here is the bottom margin of this first paragraph. But it's also the top margin for the second paragraph. They occupy the same space. So if we were to remove the bottom margin on the first paragraph, it will look like there's been no change. Let's use this first selector to remove the margin from the top paragraph. Margin-bottom equals zero to remove the bottom margin. And it looks like there's been no change, but it has been removed. This space is now coming from the top margin of this second paragraph. So let's remove that using the second selector. Margin dash top, zero. Now we can see there is a change since we've moved margin from both the bottom of the first paragraph and the top of the second paragraph. So there's no longer any margin between these two elements. Now, let's try adding some padding to the inline element. The span tag. Let's go up to our span selector and add padding in. We can see that the padding space has been added to the element, but the position of the element remains where it is. Let me just take the padding out and put that back in so that we can watch how it does not change position. No padding, with padding. Same horizontal positioning. Now, if we add margin to create some space around the elements, it actually will only apply to the left and right side. Now, this is where we can use the display property to change this behavior. So, if I add "display: inline-block", to the span element, it's going to take on the characteristics of both inline and block elements. Now, the margin is applied horizontally and vertically. Just like block elements. But, the elements still remain side by side, just like inline elements. There's one more quirk within line elements. Let's put the margin back to zero. Though we just removed the margin space, there's still some space between the inline elements, right here. That's actually coming from the line break in the html. Now, if we put the tags on the same line, that will remove the space. Though that fixes the issue, writing your html all in one line will make it very difficult to read. There are a couple other ways to get around this. One way is the use margin left with a negative value. Just to nudge it over. I'm going to make a class for this second span because I don't want the first one to be moved over. So let's just give this a class of margin. And then, we 'll set a negative margin value. Margin left negative four pixels should be just enough to close the gap. This technique will only work with margin because padding does not accept negative values. There is another option to reduce the space between the elements by using the font size property and setting it to zero in the parent element. So let's comment this out and gap is now back in the example. And instead, we're going to put fonts size zero in the parent container. So let's create a container just around the span elements. So I'm going to add a div, give it a class of wrap. And then close the div around the span elements. So there is my new container. Give it a font size of zero. So what that does is it reduces all the characters down to zero, including the space. But font size is an inheritable style. So we'll have to re-declare the font size for the child elements to override this inherited style. If you're not using the background color, this gap between the elements wouldn't even be distinguishable. So aside from aesthetics, another time you would need to remove the space is if you were using inline elements that were a specific width within a specific container size. But now there are newer layout techniques that will work better for this scenario and will be discussed later on in this course.
- Writing basic selectors
- Setting properties
- Cascade and inheritance
- Setting a font family, font size, text color, and more
- Working with the box model
- Leveraging Grid and Flexbox
- Using the float and position properties
- Working with advanced selectors
- Creating fluid layouts