It is possible with CSS to control how much vertical space exists between list elements. In this article, I will demonstrate how to control this. <\/p>\n\n\n\n
Here is a codepen example of a bulleted list with bullets that are styled as squares, but no control over spacing between list items:<\/p>\n\n\n
\nSee the Pen How to add space between list items \u2013 1 by Chris Nielsen (@Chris_Nielsen) on CodePen.<\/p>\n\n\n\n\n
This works great, except we may not want to have this extra space also added between the bottom of the list and content that follows. <\/p>\n\n\n \nSee the Pen How to add space between list items \u2013 2 by Chris Nielsen (@Chris_Nielsen) on CodePen.<\/p>\n\n\n\n\n \nSee the Pen How to add space between list items \u2013 3 by Chris Nielsen (@Chris_Nielsen) on CodePen.<\/p>\n\n\n\n\n For example:<\/p>\n\n\n \nSee the Pen How to add space between list items \u2013 4 by Chris Nielsen (@Chris_Nielsen) on CodePen.<\/p>\n\n\n\n\n <\/p>\n","protected":false},"excerpt":{"rendered":" It is possible with CSS to control how much vertical space exists between list elements. In this article, I will demonstrate how to control this. Here is a codepen example of a bulleted list with bullets that are styled as squares, but no control over spacing between list items: Now, to add space between the … Continue reading HTML & CSS: How to add space between list elements<\/span><\/a><\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"closed","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[104],"tags":[200,105,199],"class_list":["post-2637","post","type-post","status-publish","format-standard","hentry","category-html-css","tag-css3","tag-html","tag-last-child"],"_links":{"self":[{"href":"https:\/\/bluegalaxy.info\/codewalk\/wp-json\/wp\/v2\/posts\/2637","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/bluegalaxy.info\/codewalk\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/bluegalaxy.info\/codewalk\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/bluegalaxy.info\/codewalk\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/bluegalaxy.info\/codewalk\/wp-json\/wp\/v2\/comments?post=2637"}],"version-history":[{"count":13,"href":"https:\/\/bluegalaxy.info\/codewalk\/wp-json\/wp\/v2\/posts\/2637\/revisions"}],"predecessor-version":[{"id":2822,"href":"https:\/\/bluegalaxy.info\/codewalk\/wp-json\/wp\/v2\/posts\/2637\/revisions\/2822"}],"wp:attachment":[{"href":"https:\/\/bluegalaxy.info\/codewalk\/wp-json\/wp\/v2\/media?parent=2637"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/bluegalaxy.info\/codewalk\/wp-json\/wp\/v2\/categories?post=2637"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/bluegalaxy.info\/codewalk\/wp-json\/wp\/v2\/tags?post=2637"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}
Now, to add space between the list elements, all we have to do is use padding-bottom<\/code> in our CSS. For example:<\/p>\n\n\n\npadding-bottom: 40px;<\/pre>\n\n\n\n
In order to keep the space between list items, but not have this extra space between the bottom of the list and the following content, we can use the CSS3 last-child<\/code> selector. For example, here I am identifying the last list element by changing it red:<\/p>\n\n\n\nli:last-child {\n color: #ff0000;\n}<\/pre>\n\n\n
The last-child<\/code> selector can be used to eliminate the extra space at the bottom of the list by setting padding-bottom<\/code> to 0px. For example:<\/p>\n\n\n\nli:last-child {\n padding-bottom: 0px;\n}<\/pre>\n\n\n\n
For more information about the CSS3 last-child<\/code> selector, see:
https:\/\/www.w3schools.com\/cssref\/sel_last-child.asp<\/a><\/p>\n\n\n\n