Could you please advise me on where I should apply line-height in order for it to work properly?

My div is structured like this:

https://i.sstatic.net/3fUNs.png

I am trying to decrease the spacing between the lines. I attempted adding a line-height attribute to both the parent div and one of the label elements like this:

<div class="row" id="gadsDiv" runat="server" style="display: none; border-style: solid; margin-left: 
        4px; font-weight: bold; line-height:2px;">
    <asp:Label runat="server" ID="lblMovieTitle" Style="color: blue">Movie Title     
        Unknown</asp:Label><label style="font-weight: bold; padding-left: 4px; padding-right: 4px;
    line-height:2px;"> GENRES: </label>
    <asp:Label runat="server" ID="lblGenres">None or Unknown</asp:Label>
    <label style="font-weight: bold; padding-left: 4px; padding-right: 4px;">ACTORS: </label>
    <asp:Label runat="server" ID="lblActors">None or Unknown</asp:Label>
    <label style="font-weight: bold; padding-left: 4px; padding-right: 4px;">DIRECTOR[S]: </label>
    <asp:Label runat="server" ID="lblDirectors">None or Unknown</asp:Label>
    <label style="font-weight: bold; padding-left: 4px; padding-right: 4px;">WRITER[S]: </label>
    <asp:Label runat="server" ID="lblScreenwriters">None or Unknown</asp:Label>
</div>

...unfortunately, it doesn't change anything.

How can I adjust the vertical spacing of the lines?

UPDATE

Interestingly, when I check the source code, the line-height and margin added to the div style are removed:

<div id="gadsDiv" class="row" style="display:block;background-color: 
        lightyellow;border: 2px solid blue;">
    <span id="lblMovieTitle" style="font-weight: bold;font-size: large;color: 
        blue;">TO KILL A MOCKINGBIRD -- </span><label style="font-weight: 
        bold; padding-left: 4px; padding-right:     4px;line-height:2px;"> 
        GENRES: </label>
    <span id="lblGenres">Crime, Drama </span>
    <label style="font-weight: bold; padding-left: 4px; padding-right: 
        4px;">ACTORS: </label>
    <span id="lblActors">Gregory Peck, John Megna, Frank Overton, Rosemary 
        Murphy </span>
    <label style="font-weight: bold; padding-left: 4px; padding-right: 
        4px;">DIRECTOR[S]: </label>
    <span id="lblDirectors">Robert Mulligan</span>
    <label style="font-weight: bold; padding-left: 4px; padding-right: 
        4px;">WRITER[S]: </label>
    <span id="lblScreenwriters">Horton Foote</span>
</div>
htmlcsswhitespaceline-height

Answer №1

I think the reason for this issue is due to the default styles inherited from bootstrap stylesheets. To resolve this, you can add the following code snippet to your Site.css file:

#MainContent_gadsDiv {
    line-height: normal;
}
label {
    margin-bottom: 0;
}

Typically, bootstrap styles apply a 5px bottom margin to labels and set an overall line-height for the body.

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

Troubleshooting problem with CSS background image

I'm looking to make my webpage more dynamic and interactive. One issue I have is that the background image of the body element stretches when new elements are added, which is not the desired behavior. Any suggestions on how I can fix this? <styl ...

htmlcss

The altered variable refuses to show up

Currently, I am working on a project to create a Skate Dice program that will select random numbers and display the results simultaneously. Unfortunately, I have encountered an issue where the randomly generated number is not being shown; instead, it dis ...

javascripthtmlcss

Does the downloading of images get affected when the CSS file has the disabled attribute?

Is it possible to delay the download of images on a website by setting the stylesheet to 'disabled'? For example: <link id="imagesCSS" rel="stylesheet" type="text/css" href="images.css" disabled> My idea is to enable the link later to tri ...

javascriptcss

issue with jquery fade toggle not working properly on Bootstrap website

My website is built using Bootstrap and jQuery. I am facing an issue where the fadeToggle() function on a div element is not displaying properly - it remains hidden all the time. Can anyone provide insight into what might be causing this problem, or sugg ...

jqueryhtmltwitter-bootstrap

PHP not compatible with Fancybox iframe

I'm facing a simple problem that I can't seem to figure out. I have a button that, when clicked, opens a fancybox with an iframe displaying a page from my website. This page includes a form for sending an email. Everything works fine except that ...

javascriptphpjqueryhtmlfancybox

Distinct styling for the start and subsequent lines of an anchor element using ::before pseudo-element

I'm currently working on a project that requires adding a decoration in front of some anchor links (A). Right now, I am using ::before to achieve this. However, there is an issue where some of the links will line-break and the second line and subseque ...

css

I can't figure out why my unslider isn't adapting to the screen size. Check out the fiddle for more details

I recently implemented unslider to create a slideshow that spans 100% of the width on my website. Everything seemed to be working fine until I tried resizing the screen, and the slides remained the same size as they were initially loaded. Here is the code ...

javascriptjqueryhtmlcssslideshow

The functionality for tabbed content seems to be malfunctioning on Chrome and Firefox, however it works perfectly

In my index.js file, I have various functions set up like so: // a and b is placed at index.jsp $("#a").click(function (){ //this works on index.jsp and display.jsp(where the servlets forwards it). $("#b").load('servletA.html?action=dis ...

javascriptjqueryhtmljsp

Inject pure HTML code into a react div

I have extracted raw HTML content stored in the database and I am attempting to display it within a div element. const style = { border: '2px solid #eee', height: '270px', width: '100%', overflow: 'auto&ap ...

htmlreactjs

setting a div element to occupy a percentage of the window's height using viewport height units (vh) within the Wordpress platform

this is the desired appearance but upon pasting the identical code: <!-- placeholder div --> <div style="height:100px;"> </div> <!-- outer container div (with specified height) --> <div style="height:80vh;"& ...

htmlcsswordpressresponsive-design

switching tabs on a webpage

My PHP page has a menu tab with tabs labeled as Dash and Project. The Dash tab contains a table displaying data. The scenario is that when I click on a row in the table within the Dash tab, it should navigate to the Project tab, where a simple form is disp ...

phpjavascriptjqueryhtml

Ways to turn off default browser tooltip using bootstrap4 tooltip

Check out the code below, which demonstrates displaying both the bootstrap tooltip and the native title-attribute tooltip: This is an example of text with a tooltip using Font Awesome icon: <i class="far fa-question-circle" data-toggle="tooltip" title= ...

javascripthtmlbootstrap-4font-awesome-5

Design a Unique CSS Shape

Do you have any suggestions on how to create this shape using only CSS, without SVG paths? Thank you in advance! Check out the screenshot here ...

cssshapes

Select from a variety of backgrounds using the dropdown menu on the site

I seem to be struggling with javascript and php, but I know that in order to make this function properly, I need to utilize both languages. My goal is to set up a "select box" featuring 4 different images. There will be a default image displayed, but user ...

javascriptphpjqueryhtml

Understanding XML parsing problems

I've decided to keep the live xml/atom-feed URL private, as it's hosted on LiveJournal. However, I'm a bit confused about how this all works: let XML_URL = "https://users.livejournal.com/<username>/data/atom"; $(function(){ ...

javascripthtmljqueryxmlatom-feed

Display the element following a specific component while looping through an array in Vue.js

Currently, I am facing an issue while using a for-loop on the component element. My goal is to display a <p> element next to the <component> element during the loop's third iteration. The challenge lies in accessing the iteration variable ...

javascripthtmlvue.js

What could be causing my websocket server to not properly serve my HTML page?

I'm currently facing an issue with establishing a web socket connection using NodeJS in my app.js file. Despite declaring a listener on port 8080, the connection is not getting established and no logs are being generated in the console. My goal is to ...

node.jshtmlwebsocketserver

Switching the cursor to an image when hovering over an element is causing inconsistency in hover events triggering

Currently, I am attempting to implement an effect that changes the cursor to an image when hovering over a text element and reverts back to the normal cursor upon leaving the text element. However, this functionality is not working as expected when using R ...

javascripthtmlcssreactjs

Leverage Html5 to open and retrieve data from an Excel document

Is there a method to access excel file data using HTML5 while uploading the file on the client side? I have come across the use of reader in JavaScript, but unsure how it can be helpful in this scenario. Is there a way to read excel file data seamlessly ...

javascripthtmlmeteor

Is it possible to use AngularJS to show additional information between rows when a table row is clicked in HTML

I'm currently working on an html table where the <tbody> is generated using angular's ng-repeat. Take a look at my html: <tbody ng-repeat="car in carList | filter:tableFilter"> <tr> <td><a target="_blank" h ...

javascripthtmlangularjs