There are often different ways to accomplish what appears to be the same thing in CSS. In this video, look closer at using display as a layout option for horizontal navigations.
- [Instructor] Before adding a navigation to our projects, let's do an example to compare methods, starting with display. I've already added the border box fix and some background colors to the links and nav, to clearly see the sizing and spacing of the elements. We'll be using the display class for display related styles and later we'll style the floats using the float class, so that we can compare the two. Let's start with adding some space to the links. Using padding for links will improve accessibility because it will make the target area to select the link, bigger.
Since padding adds space inside of the element. When I hover over the link, I can click on the actual text or in the area covered by the padding. Though the padding was added to the links, the background color on the nav did not expand around it, and it's vertical alignment on the page didn't change either. This is the default behavior of inline elements. We can use the display property here with inline block to change this default behavior, as discussed in the previous lesson.
With inline or inline block elements we can also use text align center on the parent to automatically center align the child elements. An important thing to note when using display is the space between the elements. It looks like it could be margin, since margin adds space around an element, but this is actually coming from using the enter key to put the links on their own lines in the html.
This is similar to how the browser can read one white space when you add a space in between characters. But it can only read one white space. So, if I put the html on the same line the space will disappear. But writing all your html on one line would make it hard to read. So, I'm going to put that back. Though it's only one space between these elements, it can still cause issues depending on your desired layout.
This extra space affects how much total space the element takes up. Let's say I want to make four equal elements, by setting the links to a width of 25%. Even though 25 x 4 = 100%, the less item gets pushed down to the next line because there's not enough space for it. That space between these elements are included in the total width. So there's a few ways to get around this, other than writing the html in one line.
Option one is to reduce the width a little bit, until it fits. So, let me take this down to 24%, but the space between the elements still remain. And they don't quite take up the whole width of the nav. You can try to use decimal points to be more precise. But the problem still remains, which is the space still exists between the elements. You can actually only see the space if there's a background color on the links and the nav, so depending on your design this may not be a concern.
Another option is to leave the width as is and use a negative margin value just to nudge the elements over a little bit. This method is less precise than option one, especially if you're using percentage values. Resizing the browser may yield unexpected results. A third option is to reduce the space between the elements. By setting the font size to zero in the parent element.
I'm going to remove this margin left, and add a font size of zero in the parent element. And what this will do is it will make all this space reduce to zero. Because font size is also inherited, you'll have to reset the font size in the child element itself.
I actually prefer this third option the best, since it actually removes the space. In the upcoming lesson, we'll take a look at this nav again, using floats.
- Reviewing CSS syntax
- Reviewing simple selectors and attribute selectors
- Using pseudo-class selectors and pseudo-element selectors
- Reviewing the CSS box model
- Adding a menu to your project
- Using float, display, and position
- Debugging CSS
- Resetting stylesheets
- Working with background images
- Exploring a mobile-first approach for responsive web design
- Creating flexible and fluid layouts