Increase the line spacing within paragraphs by eliminating the extra space at the top and bottom

Trying to adjust line height in a paragraph using CSS. Here is the HTML:

<div>
    <p>Lorem ipsum dolor sit amet, oratio doctus his an. Nisl saperet delenit ad
       eos, his eros solet vituperata et, has tantas nemore consetetur ne. Nam cu autem nostr overterem. 
       Ne etiam detraxit adversarium eam, rebum epicurei ea ius. Appareat lucilius
       invenire duo eu, an enim oportere duo, vidisse quaerendum at duo.
    </p>
</div>

Simple CSS:

p {
  line-height: 5.5em;
  background-color:#ccc;
}

The line height is adjusted correctly, but looking to remove space from top and bottom as shown in the linked image.

Any assistance with this would be appreciated!

htmlcss

Answer №1

To achieve a similar effect, you can utilize negative margins in your CSS styling. However, keep in mind that adjustments may be necessary when modifying the line height:

p {
  line-height: 5.5em;
  background-color: #ccc;
}
div {
  overflow:hidden;
}
p::before {
  content:"";
  display:block;
  margin-top:-3em;
}

p::after {
  content:"";
  display:block;
  margin-bottom:-3em;
}
<div>
  <p>Lorem ipsum dolor sit amet, oratio doctus his an. Nisl saperet delenit ad eos, his eros solet vituperata et, has tantas nemore consetetur ne. Nam cu autem nostr overterem. Ne etiam detraxit adversarium eam, rebum epicurei ea ius. Appareat lucilius invenire
    duo eu, an enim oportere duo, vidisse quaerendum at duo.</p>
</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

Activate jquery to initiate the login modal

I am having trouble getting the login modal to appear using jQuery. I can't seem to figure out why it's not popping up. You can check a similar question here and I followed the answer but still no luck. <script> $(document).ready( ...

htmlbootstrap-4bootstrap-modal

Having trouble with my CSS hover not functioning properly

I need some help with my code. Can you please take a look and let me know why the hover effect is not working? Thank you! <style> #moreDiscussHome:hover{ background-color: #ffffff; } </style> <a id="moreDiscussHome" style="co ...

css

What is the best method for passing parameters from HTML to AJAX within code?

My project involves working with Flask, HTML, and Ajax. Here is the HTML code snippet: <script type=text/javascript> $(function() { $('a#calculate').bind('click', function() { $.getJSON('/_add_numbers&ap ...

javascriptjquerypythonhtmlajax

Tips on creating animations for elements that are triggered when scrolling and become visible

Is there a way to animate an element when it becomes visible on scroll, rather than at a fixed position on the page? I'm currently using code that triggers the animation based on an absolute scroll position, but I'm looking for a more dynamic sol ...

javascripthtmlcssanimationcss-animations

Numerous Levels of Dropdown Menus

I am looking to implement a feature on a web page where users can select multiple vehicles using JQuery. The idea is that selecting the brand in the first dropdown will populate the second dropdown with the models available for that specific brand. The ...

javascriptjqueryjsonhtml

Customize URL based on selected button

My question may be a bit unclear, but I want to generate dynamic URLs that redirect users to specific pages based on the link clicked. For example: Parent page with links (a, b, c, x, y) User clicks on 'b' User is taken to a Node Page that play ...

javascriptjqueryhtmlcss

What is the best way to position a <td> element within a table row underneath another <td>?

Looking for a solution to ensure Content 3 appears below Content 2 in this block of HTML. Content 1 is extensive and extends far down the page. <table> <tr> <td>(Content 1)</td> <td>(Content 2)</td> ...

javascriptjqueryhtmlcss

Distinguishing Font Sizes in Safari Compared to UIWebView

When the page is loaded in Safari, everything looks perfect. However, when viewed in a UIWebView, all the fonts appear enlarged. I've done my research and tried various solutions like: - Setting WebView.scalesPageToFit = true - Applying default con ...

ioscssswiftuiwebview

Listen for a click event on an Unordered List using addEventListener

Struggling to transform a for loop that iterates through an unordered list of hyperlinks and adds an 'onclick' function to each into one using an event listener instead. Unfortunately, I have not been able to create a functional solution. Below ...

javascripthtml

Use JavaScript to create a new window and load the HTML content from an external URL

Just starting out with HTML and Javascript I'm trying to use JavaScript to open a window and load content from an external source. I attempted using document.write(), but it only works when I hardcode the HTML as input. Any suggestions on how to get ...

javascriptjqueryhtmlweb

When inserting a page break after a section, it seamlessly flows to the next page during printing

When should the CSS properties page-break-after: always or before be used? I have tried various methods, such as creating different div elements for page-break, adjusting float and clear:both, but have not had any success. There are currently four section ...

htmlcssgoogle-chrome

New data row successfully added to HTML table, revealing an object display

When I click a button, a dialog box opens up. I can fill out the form inside the dialog box and submit it to insert a row into a table. After submitting the form, the newly inserted row displays as [object Object] immediately after submission: https://i.s ...

javascriptphphtmljquery

iOS Safari is displaying the keyboard with a comma instead of a period

Is there a way to display a comma instead of a period on the iOS keyboard in Safari? Upon tapping on the input field, users are presented with a keyboard featuring a period. https://i.sstatic.net/nMFCg.png ...

ioshtmlsafari

Utilizing ASP.NET with JavaScript to target elements by ID within an iframe

Struggling to populate my form within an iframe by inputting a value in a textbox and selecting an option from a dropdown menu. webform1 <!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head runat="server"> <title ...

javascriptjqueryhtmlasp.netiframe

Comparing hardware-accelerated CSS3 animations, transitions, and jQuery animate for mobile devices

While developing my app using PhoneGap and jQuery, I encountered a dilemma regarding animations. Initially, I relied on what I knew best - jQuery animate - to create smooth movements. However, discussions about hardware acceleration caught my attention. ...

cssjquery-animatecss-transitions

Ways to make a div adjust to the width of its content

Hello, this is my first time posting a question here. I have found many helpful Java answers in this community before, so I thought I'd give it a try. I did some research beforehand, but please let me know if I have duplicated a question or done anyth ...

css

What are the steps to testing a webpage designed for Retina display?

I have designed a webpage optimized for retina display, but I don't own a monitor with that capability. Is there a simulation tool available to test websites on retina displays? Alternatively, are there non-Apple monitors comparable to Apple's ...

htmlretina-display

Issues persist with the textarea failing to update the longtext data field

I'm having trouble updating a longtext data cell in my database when I save and post to the same page using a simple form with a textarea. Despite not receiving any PHP errors, the database just doesn't seem to update and I can't figure out ...

phphtmlsql

Display the selected checkbox in the table

I am struggling to display the selected check value in a table. I am having difficulty in showing the check values corresponding to each row in the table based on my selected value. For instance, in the code snippet below, I have selected values as true,f ...

phphtmlcheckboxexplode

I am trying to update the content in ckeditor when a different option is selected, but for some reason it is not working

jquery issue: the jquery that I added and the content doesn't change even though the "alert(model);" works fine <script> $(document).ready(function() { $("select.modele").change(function() { var modele = $(this) ...

javascripthtmljquerylaravelselect