Uniform line spacing

Is it possible to ensure consistent line-height between all lines by specifying it as 0.99em for both P tags and UL tags? Along with that, is it possible to maintain a space of 0.99em between P tags and UL tags, as well as between P tags themselves?

To see an example on Bootply, click here.

Code:

HTML

<p><span>7.1</span> this is itthis is itthis is itthis is itthis is it...</p>
<p><span>7.2</span> here we gohere we gohere we gohere we go...</p>
<p><span>7.3</span> now toonow too...</p>
<ul>
<li>(a) why why why whywhy why...</li>
<li>(b) if if ifif if if if if if if...</li>
<li>(c) please pleasepleasepleaseplease...</li>
</ul>
<p><span>8.1</span> Take this.Take this...</p>
<p><span>8.2</span> Take this.Take this.this.Take this...</p>

CSS:

p {
    padding-left: 3em;
    position: relative;
    margin-left:5em;
    margin-right:5em;
    line-height:0.99em;
}

p > span {
    display: inline-block;
    left: 0;
    position: absolute;
    top: 0; 
    width: 3em
}

ul {
    list-style: none;
    text-indent:-0.5em;
    margin-left:7em;
    margin-right:4em;
    line-height:0.99em;
}

Answer №1

Answer extracted from a comment.

The line-height attribute is used to establish the height of each line within a tag, ensuring that every line in a two-line paragraph has a consistent height value. It essentially sets the internal height of the tag.

The gap between tags is not determined by the line-height property. In this scenario, the spacing between tags is created by applying a margin-bottom of 10px to them.

Answer №2

Did you consider using the line-height property with a specific px value? Using em can be confusing if you're not familiar with it. Here is a helpful explanation Why choose em over px?

I have included examples of setting line heights in pixels in your code at this link http://www.example.com/sample-code

Answer №3

Specifying a line-height with a numerical value does not guarantee that the line will be exactly that height.

If the font size does not perfectly match the specified line-height, the computed value may vary. Determining what constitutes a perfect fit is not always straightforward either.

Feel free to check out my code example:

<p style="line-height:12pt;font-family:Verdana;font-size:16pt;">
line-height:12pt / font-size:16pt<br><br>
Testing Testing Testing<br/>
Testing Testing <span style="font-family:'Segoe Script';">Testing Segoe Script</span><br>
Testing Testing Testing<br>
</p>
<br>
<p style="line-height:12pt;font-family:Verdana;font-size:12pt;">
line-height:12pt / font-size:12pt<br><br>
Testing Testing Testing<br>
Testing Testing <span style="font-size:20pt;">Testing font-size:20pt</span><br>
Testing Testing Testing<br>
</p>

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

Prevent incomplete date input in Html5 date input field

Is it possible to make an input type="date" field, which is not required, treat partially completed dates entered by the user (e.g. month and day without year) as invalid rather than silently accepting them? I would like to alert the user in this scenari ...

How to make a sticky sidebar using JavaScript or jQuery

Hello everyone! I am just starting out in front end web development, so please bear with me if my question seems basic. I am trying to figure out how to create a sticky sidebar that only appears when the parent div is in view, and disappears when it' ...

What is the process for modifying input text and saving it for future use?

Is it possible to create an input field where users can change their name and have the new string stored as a username? I attempted to achieve this using form, but encountered the following error: Error: Template parse errors: Can't bind to 'form ...

Adjust the spacing between the title and other elements in an R Shiny application

How do I modify the font and size of a title, as well as add some spacing between the title and other elements? navbar <- navbarPage( Title = "Intervals", tabPanel("Data Import", sidebarLayout(sidebarPanel(fi ...

Automating button clicks after a component has loaded in Angular 2+ can be achieved by implementing a

Currently, I am working on implementing an automatic search function in Angular that triggers after a component loads. Right now, the function is triggered by a button click, but I want to automate this process. <button mat-raised-button class="mat-whi ...

How come it functions with $scope but fails with `this`?

I am trying to figure out why my code only works with scripts 1 and 3, but not with script 2. I need this functionality for my project because I can't use $scope. Thank you!! <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.19 ...

Adjust the height of the `<input type="file">` element to match the containing div by utilizing Bootstrap 4.5 styling

Can I update the .html file to give the "Choose File" and "Upload" options the same height as the "Upload" button in the second div, which has the py-4 tag? <div class="input-group"> <div class="custom-file py-4"> < ...

Using AJAX to dynamically populate PHP form inputs from HTML

I'm trying to create a simple HTML form where users can input their information and have it sent to a PHP file using JavaScript with AJAX. However, I'm encountering an issue where the values from the form are not being included in the email that ...

Trouble arises in next.js containers when their content exceeds the specified limits due to @media rules adaptation

I've been working tirelessly for the past 2 days to resolve an issue with my next.js project. This is my first time using this technology and I feel like I might be overlooking something crucial. The problem revolves around three layers (as seen in t ...

Is it possible to utilize jQuery for dynamically generating a file along with its content?

Here is the HTML snippet I am working on: <ul> <li> Download <a href="#">file1</a> </li> <li> Download <a href="#">file2</a> </li> <li> Download <a href="#">file3</a> </li> ...

Responsive column display on mobile devices can be optimized by configuring columns to appear in a 2x3 or 1x6 layout. This can be achieved even with

Currently utilizing the Avada Fusion Theme, my ability to edit core theme HTML files is limited. Fortunately, I do have access to Custom CSS. The challenge I am facing involves adjusting the display of the columns to appear as 2x3 instead of 1x6 on mobil ...

Learn the process of generating dynamic rows in HTML

Currently, I'm working on a website where I am incorporating the Flipkart API to display a list of products. However, the products are not appearing in the well-formatted view that I had designed. Specifically, I want only 4 products to show per row b ...

What is the method for creating a loop that includes a radio-like button?

https://i.stack.imgur.com/YkheU.jpg How can I create a button that functions like a radio button? What is this type of button called? And how can I add radio buttons in a loop similar to the image above? I know the button input needs to be wrapped with ...

"Form submission fails to populate _POST when file and text fields are used simultaneously

Looking for a solution... <form action="upload.php" method="get" enctype="multipart/form-data"> Enter a 10 digit mobile number: &nbsp;<input id="imgphno" type="text" maxlength="10" /> <br/><br/> <input id="file" type="file" ...

What steps should I take to execute a unique function the very first time a user scrolls to a specific element?

The issue at hand: I am working with a sophisticated looping image carousel that needs to initiate - starting from a specified initial slide - as soon as the user scrolls to a specific division. It must not restart if the user scrolls up or down and then ...

What are the best ways to engage with a div element using keyboard shortcuts?

Is it possible to enable keyboard shortcuts for interacting with div elements? I am working on a project tailored for seniors who may have difficulty using a mouse. Is there a way to utilize keyboard shortcuts to click on divs and access their contents? H ...

Tips for adjusting the hover size in a navigation bar

I'm currently learning how to use bootstrap and I'm attempting to create a navbar that shrinks when scrolled down, and I also want the hover effect on the links to be full-height. I've tried multiple approaches but haven't been successf ...

Creating an opaque effect on a Material UI Drop down menu: Step-by-step guide

For the last half hour, I've been experimenting with my Select dropdown menu in an attempt to make it semi-transparent, but without success. I've tried adjusting the properties of the Paper, then the Menu, and then the MenuList, yet it appears th ...

Issue with Jquery Fatnav - active state not functioning properly

Currently, I am implementing a Jquery plugin known as fatNav. The documentation for the plugin can be found here: https://github.com/Glitchbone/jquery-fatNav Although everything is functioning properly, I am encountering difficulty getting my active stat ...

Navigating the FormSpree redirect: Tips and tricks

I recently set up my website on Github Pages and wanted to integrate a free contact form from FormSpree. However, I encountered an issue where after submitting the form, it redirected to a different website, which was not ideal. After researching online, I ...