I am trying to adjust the spacing between span lines to be 15px, however, I am encountering issues when using line-height. When measuring the space with a Chrome extension, it appears that the space is not actually equal to 15px.
<div class="test">
<span style="line-height:15px;">
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor
</span>
</div>
Here is the result: see image here for reference
Were you able to find what you needed? I included a p element so that the CSS could target this text block.
<div class="test">
<span>
<p style="line-height:25px;">
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor
</p>
</span>
</div>Great job! It looks like your code is functioning correctly. Just a reminder that line-height doesn't change the font size, but rather adjusts the spacing above and below the text (which is why the height remains unchanged in the Chrome DOM viewer).
Below is a snippet to illustrate this concept:
.example {
background-color: blue;
}
.example > span {
line-height: 125px;
color: white;
}<div class="example">
<span>
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor
</span>
</div>Looks like your code is functioning correctly, but there might be a slight error in your measurements.
<div class="example" style='width:50px'>
<span style="line-height:1; font-size:15px">
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor
</span>
</div>
The line-height property accepts values without units as a multiple of the font size, determining the space each line occupies.
Line boxes are associated with the containing block element, such as the .test element in this case. Inline elements like the span are segmented into multiple inline boxes that fit within the line boxes separated by line breaks.
Each line within the .test element consists of a zero-width inline box known as a strut along with a portion of the span. While the span has a line-height of 15px, the strut's line-height is determined by the .test element.
If there are no changes to font family, font sizes, or vertical alignments, the space between two lines is equal to the higher value between the line height of the strut and the line height of the span.
By default, with standard font size, font-family, and line-height settings, the strut's line height can range from 18 to 19 pixels, which explains why there may be larger gaps than anticipated.
To decrease the spacing between lines, adjust both the strut's line-height and the span's line-height by setting the line-height for the containing block. The span element can inherit this adjustment. For example:
body { width:200px; } /* demo purposes for displaying multiple lines */
.test {
line-height: 15px;
}<div class="test">
<span>
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor
</span>
</div>Whenever I attempt to click on the button, a Bootstrap modal dialog box appears but remains unresponsive no matter what I try. My project utilizes both Bootstrap and fullPage.js http://codepen.io/anon/pen/obEOzO <body> <div id="fullpage"> &l ...
When using an absolute v-overlay inside a v-col, the grandparent v-row is covered by the overlay instead of just the parent v-col. "Absolute overlays are positioned absolutely and contained inside their parent element." -According to Vuetify&apo ...
What about using this instead: :root { --primary-color: gray; --secondary-color: lightgray; } var(--pc) Is there a more concise syntax available, perhaps shorter than var(--pc)? ...
Here is the code for my login form password field (I'm using bootstrap 4): <div class="form-account-label-input"> <label> Password <span class="star-red"> *</span></label> <input type ...
I'm struggling to create a basic web page using JSP. The issue I'm facing is that no resources, such as images or CSS, are being found regardless of the URL I use. Here is my simple JSP code: <%@ page language="java" contentType="text/html; ...
When using Bootstrap, focusing on an input activates a blue border and box shadow to show where the user's attention is. If there are validation states such as error, warning, or success, a red, yellow, or green border will be added accordingly. An ...
Looking to create a modern, sleek 2-column HTML5 interface with a left sidebar and main content area on the right. Backwards compatibility is not an issue as all users will be using the latest versions of Chrome or FF. The goal is to give the sidebar a ba ...
I am working on a project similar to the StackOverflow editor. I am fetching markdown text, converting it to HTML, and then displaying it in a preview area. However, when I try to style the injected HTML elements using CSS, the styles are being ignored. Up ...
I added a basic loading div to my website that fades out once the entire page has finished loading. The code I used is simple: $(window).load(function(){ $('#loading').fadeOut(500); }); While this works well on all desktop browsers and Chro ...
I am attempting to create a layout where list items within a column have equal heights. Below is my current code: <ol> <li>List item 1</li> <li>List item 2</li> <li>List item 3</li> </ol> ol { ...
Is there a way to prevent the highlighting of selected options in a <select> menu when a user makes a selection? <select id="my_select_menu"> <option id="1">Option 1</option> // I do not want this option to be highlighted ...
I'm looking to create a banner that adjusts appropriately for mobile and desktop display. Here's what I've tried: When it is displayed in mobile When it is displayed in desktop In my attempt, the text alignment was off even though I used ...
I'm currently developing a React application featuring flex container cards (referred to as .FilmCard with movie poster backgrounds) within another flex container with flex-wrap. Each card has an item positioned absolutely (an FontAwesome arrow icon). ...
Currently, I am facing an issue with box padding specifically in Firefox. Upon inspecting the affected span element, I noticed a property called "padding-right-ltr-source" with the value "physical". Here is the snippet of code: >padding: 0px 15px; ...
Problem I encountered an issue with my projects that are both using the bootstrap-datetimepicker. While one project displays the correct color, as seen here, the other project shows a wrong color, shown here. Below is the HTML code snippet I am working wi ...
html <div class="row-fluid together"> <div class="span3"> <p> <label for="typeofmailerradio1" class="radio"><input type="radio" id="typeofmailerradio1" name="typeofmailerradio" value="Postcards" />Postcards& ...
I am encountering an issue with a flydown menu that includes a scrollable div. The div is about 400 pixels in height, causing scrollbars to appear in the drop down menu. When I hover over it, I trigger the show method as follows: $("#flydown").show(); Al ...
Messy Screen Recently delving into the world of Bulma, I decided to take a shot at customizing my CSS. Unfortunately, it seems that after some tweaking, my screen layout has gone haywire. Can anyone shed light on why two elements might refuse to maintain ...
Having a dynamically generated list of elements, each structured like this: <div class="under-item-description"> <span class="under-compare-price">100</span><span class="under-price">50</span> <span class="under-compar ...
Currently, I am trying to grasp the concepts of Dojotoolkit and my objective is to display a form when a button is clicked. Upon reviewing other examples, my code seems correct to me; however, there appears to be something crucial that I am overlooking but ...