What is the typical method for preserving a specific gap between two lines when the line spacing surpasses the margin?

My workplace provided me with a wireframe that looks like this:

https://i.sstatic.net/Qumru.png

Description of the image above: Maintain a margin of 10px between the lines and utilize the specified css class .font16.

This is what the .font16 class contains :

.font16{
font-size: 16px;
line-height: 22px!important;
}

Here's what I've done so far:

My code without using the font16 class :

<div><div style="margin-bottom:10px;">A quick brown fox</div><div>Jumped over the</div></div>
The margin between them is exactly 10px.

My code with the font16 class :

.font16{
font-size:16px;
line-height:22px!important;
}
<div><div class="font16" style="margin-bottom:10px;">A quick brown fox</div><div>Jumped over the</div></div>

When adding the font16 class, the margin between the lines seemed to increase due to the line-height.

To maintain a 10px margin between them, here's what I did:

.font16{
font-size:16px;
line-height:22px!important;
}
<div><div class="font16" style="margin-bottom:7px;">A quick brown fox</div><div>Jumped over the</div></div>

The calculations used in the snippet above: I subtracted the font size from the line-height i.e. 22px-16px = 6px which are divided equally above and below the text. Therefore, 10px - 3px = 7px. Hence, applied a bottom margin of 7px to ensure a 10px margin remains between the lines.

Am I following the correct approach here? Are my calculations regarding line-height and margin accurate?

Note: I am unable to alter the values of the font16 class.

Answer №1

After analyzing the initial sketch, it appears that there should be a 10px gap between the lowercase letters. Assuming both divs are meant to have the class font16, the solution is quite simple. Just rely on CSS to handle the calculations for you!

.font16{
font-size:16px;
line-height:22px!important;
}
<div>
  <div class="font16" style="margin-bottom:calc(10px + 1ex - 22px);">A quick brown fox</div>
  <div class="font16">Jumped over the</div>
</div>

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 Align <ul> to the Right in Bootstrap 4

Looking to align a list to the right in the header section, here is the code snippet: <div class="collapse navbar-collapse" id="app-header-nav"> <ul class="navbar-nav mr-auto mt-2 mt-lg-0"> <li class="nav-item"> <a class=" ...

Remove numerous entries from the WordPress database by selecting multiple checkboxes

A new customer table named "tblvessel" has been created in the Wordpress database. The code provided below selects records from the database and displays them as a table with checkboxes next to each record, assigning the record's 'ID' to the ...

Expanding the full width of the bootstrap navbar

Let's cut to the chase - I'm working with Bootstrap 4 and trying to make my navbar fill the entire width (excluding margins). I know this question has been asked before, so I checked out a post here which suggested using the .nav-fill class, but ...

unable to display loading image prior to upload

<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%> <!DOCTYPE html> <html lang="en"> <head> <title>Unique Prints</title> <meta charset="utf-8"> <meta name="viewport" conte ...

Click here to get the button click link

Is there a method to obtain the link of a button click on a website? This is the Website and it features a play button. I am looking for a way to capture the link triggered by clicking the play button so that the audio starts playing automatically each t ...

What is the best way to align an image underneath text?

I'm currently working on this design concept: https://i.stack.imgur.com/wJm0t.png Below the title, there is a particle image with half square images positioned on the top right and bottom left corners. My goal is to center the particle image below th ...

Strategies for determining the direction of a slide event within a Bootstrap carousel

I am attempting to identify the direction of the slide in a Bootstrap 4 carousel when the user initiates the slide event. Is there a method to achieve this? $('#myCarousel').on('slide.bs.carousel', function () { //Determine wheth ...

Transform your standard HTML form code into a condensed single-line embed code

I've devoted countless hours to finding a resolution for this issue. It's most likely simple, but alas, I haven't found it yet. My current project involves creating my own HTML forms using HTML and CSS, along with a touch of JavaScript. In ...

Exclude striped tr elements within a subtable

I have a main table (Maintable) containing information, with each row having a sub-table for additional details that can be collapsed if needed. I am trying to stripe the rows in the Main table but using `tr:nth-child(even)` is not working as it also affec ...

fixed divs that remain in place while scrolling

In the past, I have implemented a method similar to this: However, I am not a fan of the "flicker" effect that occurs when the page is scrolled and the div needs to move along with it. Recently, I have come across websites where certain elements (such as ...

Style the CSS elements for a specific item

I have a situation where I need to change the background image of a specific element within a CSS class without affecting others. For example, I have a class "a" with a background image that is used for multiple elements, but I only want to change the back ...

Enable Component to Exceed to the Following Line

I'm having trouble getting a map of a component to move to the next line (as indicated by the yellow arrow). Currently, instead of moving below, it is squeezing the Component (the Cards). I've added background colors for clarity. Any advice would ...

During the initial cycle, the CSS keyframes animation may experience glitches, but it will run smoothly in subsequent cycles

Seeking advice on troubleshooting a CSS keyframes animation issue. I have created an animation with 5 frames where the background image fades and transitions to the next image smoothly in all cycles, except for the first cycle where it glitches before each ...

What are some ways I can customize the appearance of a Bootstrap 5 Navbar specifically when it is in the collapsed

Currently utilizing Bootstrap 5, my goal is to align the Navbar social icons to the left when the navbar is collapsed for small/mobile devices, and to the right when viewed on a larger screen. Can you assist in identifying which selectors need styling for ...

Utilizing JavaScript to create multiple HTML tables from JSON data

Is it necessary to create separate tables in HTML for each set of JSON data when all tables have the same number of columns (2 columns)? I am looking to minimize the JavaScript function that displays the table with the current JSON data. Can I use one tabl ...

Firefoxi is the only browser that exhibits strange padding and margin behavior

Check out this webpage at: www.bit.ly/1b4dUqs Most browsers display the page correctly, but there seems to be an issue with Firefox's (latest version) handling of margin-top/padding-top styles. If anyone has a solution for this problem, please share ...

Internet Explorer does not support the use of a:focus

Unfortunately, the issue with a:focus not working in IE is still unresolved. I have been searching for a solution, but have not been able to find one yet. <div class="city-selection"> <ul> ...

How to Align Navigation Searchbar in Center When Bootstrap is Collapsed

I am attempting to center my search bar when it is collapsed. Currently, it appears like this: As you can see, the links are centered, but not the search bar. This is the existing HTML structure: <!-- Navigation Bar Start --> <div class ...

Adjust color scheme of drop-down menu

Having trouble changing the background color for my drop down menu. I tried to change the color for the sub div but it's not working. Can anyone help me fix this issue? Here is the code snippet: http://jsfiddle.net/3VBQ6/4/ #nav li:hover ul.sub li { ...

Fixing the CSS 404 error caused by using variables in Flask routes: A step-by-step guide

I have created a basic web application to showcase book reviews. Upon a successful search, users are provided with links to book titles - when a link is clicked, the goal is to pass the ISBN of the selected book to the url_for method and then present the c ...