Adjusting spacing between list items in an unordered list: using the "line-height" method proved to be ineffective



here's the link to the JSFiddle where I am attempting to organize the code.

I am looking to increase the spacing between Text_2a and Text_2b. Initially, I adjusted the .li class:

line-height: calc(1em + 1.5vw); was modified to line-height: calc(2em + 1.5vw);

However, this change also affected the gap between Text_2a and Text_1, whereas I intended for it to remain unchanged.

Can you assist me in identifying what I might be doing incorrectly?

Below is the snippet of code:

<div class="meaning">
 <ol class="circle">
  <li>Text_1</li>
 <ul>
  <li><span class="example">Text_2a</span></li>
  <li><span class="example_translated">Text_2b</span></li>     
 </ul>
 </ol>
 </div>

.meanings_and_examples {
  display: flex;
  flex-direction: column;
}

.meaning {
  width: auto;
  text-align: left;
  color: #1f2c60;
  font-size: calc(0.5em + 2.3vw);
}

ol.circle {
  position: relative;
  list-style-type: none;
  padding-left: 3em;
  margin-left: 1vw;
  border: 2px solid purple;
}

li {
  line-height: calc(1em + 1.5vw);
}

ol.circle > li {
  position: relative;
  counter-increment: item;
  margin-top: 1.5%;
  border: 2px solid orange;
 }

 ol.circle > li::before {
  position: absolute;
  transform: translateX(-150%);
  content: counter(item);
  display: inline-block;
  text-align: center;
  border-radius: 100%;
  width: calc(1.1em + 1.5vw);
  background: #1f2c60;
  color: white;
 }

 ul {
  list-style-type: none;
  padding-left: 0;
  margin-top: 1%;
}

.example {
  width: auto;
  text-align: left;
  border: 2px solid green;
}

.example_translated {
  width: auto;
  text-align: left;
  color: #5d78e5;
  border: 2px solid red;
}

Answer №1

To add space between list items in an unordered list, you can apply a margin-bottom to the li elements.

ul > li{
    margin-bottom: 10px;
}

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

`How to update caret color on hover of drop down button`

Here is an example of a button using an anchor tag: <a href ng-if="!isLogin" class="dropdown-toggle" data-toggle="dropdown"> <b class="white-link">Login</b> <span class="caret white-link"></span></a> In order to style ...

Creating an image that scales to full width within a Bootstrap column after switching to mobile view

I am having trouble getting the image on the right to expand to full width when the screen size is reduced, transitioning it to mobile view. Is there a Bootstrap class that works similarly to "img-fluid", but displays the image in full width below the text ...

Trouble encountered while creating a table with the Bootstrap grid system

I'm attempting to create a table using the bootstrap grid system. The HTML code below is meant to generate the table, but I'm encountering an issue where the table cells overlap on screens with a width of 768px. .row.header { height: 44px; ...

Issue with ngShow not functioning when used within an HTML template

I'm struggling with displaying and hiding a div from a template on an HTML page. You can see a simple JSFiddle example here. app.directive('example', function () { return { restrict: 'E', template: '< ...

Is there a way to have a single background image fill the entire screen?

Can someone help me with my Offcanvas navbar created using Bootstrap? I added a background image from Google as the URL, but instead of one whole piece, it's appearing as 6 duplicate images. What could be the issue here? I tried looking for solutions ...

Troubleshooting Google Web Fonts

I seem to be using code similar to what I used before, but it appears that the fonts are not loading. <html> <head> <script src="http://fonts.googleapis.com/css?family=Yanone+Kaffeesatz:extralight,light,regular,bold"></s ...

There is excessive white space at the bottom of my Index page after the footer that needs to be removed

Recently began working on converting a PSD to HTML and I've reached a point where everything seems fine. However, I understand that my CSS programming may not be the best at the moment. With your help, I am confident that I can learn and improve gradu ...

I'm attempting to use Bootstrap to align my divs, but unfortunately, it doesn't seem to be working as I had hoped

I've been attempting to align divs using bootstrap, but I'm encountering issues. I prefer not to use a table for this purpose and have experimented with the table tag, but would rather achieve alignment with divs and bootstrap. My familiarity ...

The issue of importing CSS files that themselves import other CSS files via URL is causing a problem

Why is this not working correctly? I have included [email protected] A.css (css file that imports from a URL) @import url('https://fonts.googleapis.com/css?family=Source Sans Pro:300,400,600,700,400italic,700italic&subset=latin'); Ap ...

Retrieving the chosen option from a radio button

<!DOCTYPE html> <html> <body> <input type="radio" name="colors" value="red" id="myRadio">Red color <p>Click the "Try it" button to display the value of the value attribute of the radio button.</p> <button onclick=" ...

What is the best way to direct users to an input field within a dynatree title?

I am currently utilizing Dynatree to display a tree view, and my goal is to focus on an input field within the dynatree title element. However, I am encountering an issue where the focus is being lost. My code attempts to address this problem but unfortun ...

Drop into sleek navigation with nested tabs - Twitter Bootstrap

Is it possible to create a dropdown menu using Bootstrap? I want to make one but don't know where to start. Currently, I only have the following code snippet: <li data-toggle="dropdown"><a href="#">Vehicles</a> <ul class="dr ...

Adjusting the color of text inside a div when it gets cut off

I've been attempting to change the text color when it gets truncated, but so far I haven't had any luck. In the scenario presented below, the first div (numbered 1) should display in a different color. Any suggestions or recommendations would b ...

Guide on making a prev/next | first/last button functional in list.js pagination

Is there a way to enhance my paginated index by adding prev/next, first/last buttons? I am curious if anyone has implemented these features using List.js. <script src='//cdnjs.cloudflare.com/ajax/libs/lodash.js/2.4.1/lodash.min.js&ap ...

CSS - Text and dropdown misalignment due to spacing issue

I'm looking to decrease the spacing between the text "Allow type of Compartment Option" and the dropdown box. Here is the code snippet being used: .cl-checkbox { padding-left: 20px; padding-bottom: 10px; padding-top: 20px; ...

Is there a technique I could use to create a visual effect like zooming, but without altering the dimensions of the image?

I'm currently working on a project to develop a photo gallery. let img = document.createElement('img') img.src = "https://upload.wikimedia.org/wikipedia/commons/thumb/0/07/Wikipedia_logo_%28svg%29.svg/1250px-Wikipedia_logo_%28svg% ...

Unusual CSS problem- What's causing this display issue in Google Chrome?

If you take a look at this specific page: Upon viewing it in Internet Explorer or Firefox, everything appears to be normal. However, when viewed in Chrome, there seems to be some sort of issue present. The navigation area is oddly pushed down, causing the ...

Show angular variable data in a table based on their index

I have an array of angular variables with values like [ 170, 1, 130, 3, 134, 4.... and so on]. I would like to present these values in a table format where the even positioned values are shown in one column and the odd positioned values in another column. ...

Opening the dropdown menu in IE8's HTML select requires a double-click

Below is the code snippet I am referring to: <!doctype html> <html lang="en"> <head> <meta charset="utf-8" /> <script src="http://code.jquery.com/jquery-1.7.1.js"></script> <style type="te ...

Is there a way I could customize this design to include buttons that smoothly navigate to the following section?

I'm attempting to create a Web Page that scrolls horizontally. Currently, the template relies on J Query and CSS to manage width but users must still manually drag the scroll bar at the bottom of the page. Is there a way to incorporate arrows or click ...