Lists have some default properties that can be visually jarring. List items indent a considerable portion by default, and lengthier list items can look crammed together more like a paragraph. If you find these things visually unappealing with your layout or how you are using a list, you can make adjustments through margins and padding. The important part is asking yourself whether you want the list as a whole adjusted, or just the individual items.

When adjusting a list, think of it as a big block that’ll take all of its list items with it, because this is precisely what is happening. If you don’t like the amount of space above or below a list, target the <ol> and <ul> as your selector, and change the margin value. By default, lists have a top and bottom margin of 1em, or the equivalent of one line of your current font size.

As for a list’s indent, this is due to its default left padding of 40px. Target the <ol> or <ul>, and change the padding-left value to one that is desirable. If you set it to zero, your list item text will align to the left edge, but it’ll leave no room for the labels (bullets, numbers, Roman numerals, etc). A left padding value of 16 or 17px will move over the list enough to where the labels appear left-aligned with text above and below your list. Just make sure to preview your page in multiple browsers if you can, as different browsers can have very slight differences in how they interpret measurements.

Do you feel like your list items are too cramped? This is a case where we need to target the <li> tags, as we want the individual list items to have more space, not around the whole block of the list. Add a top or bottom margin property (or both) to the li selector and adjust the value until your list has the level of readability you’re seeking. Notice the difference in visual space between the two lists below.