Tips for incorporating padding when an h1 title spans multiple lines

I'm facing an issue with a div that has a width of 46%. When the text in the h1 tag is too long, it gets broken into multiple lines and the left padding is not consistent. Is there a way to maintain the same left padding for the second line?

To help illustrate the problem, I have included an image and the relevant CSS code.

Below is the HTML code:

<div class="header-tite">
    <h1>An Epidemic 37 Years in the Making</h1>             
</div>

And here is the corresponding CSS:

.header-tite{
  width:45%;
  float:left;
  position:absolute;
  left:95px;
  bottom:42px;
  z-index:1;
}

.header-tite h1{ 
   font-family: 'gotham_bookregular'; 
   font-size:55px; 
   font-weight:normal; 
   color:#191919; 
   line-height:68px; 
   padding:0px 10px 0px 10px; 
   background:#FFFFFF;
   display:inline;
   opacity:0.85;
 }

The current output displays the inconsistency in padding before the second line of text.

I am looking for a solution to maintain the same gap before the letter "Y."

htmlcss

Answer №1

Avoid using display: inline with block elements if you want to achieve a certain result. If absolutely necessary, consider using a span tag within your h1 tag to style the additional text separately. It's not recommended to ignore the spacing issue, especially if the text is dynamic. However, if you have full control over the text, you can utilize the span tag for extra styling. Check out this example here http://jsfiddle.net/Wandile/5wy9o5zs/2/. I hope this information is helpful.

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

Issue with ellipsis not functioning correctly on dynamic placeholders when they are in focus

When I focus on my dynamic placeholder input, the text-overflow: ellipsis property is lost for some reason. However, it is regained when blurred. Can anyone explain why this is happening? If you want to experiment with it, I have set up a stackblitz: htt ...

htmlcssangular

Is the CSS parser malfunctioning?

My program is designed to scan css files using the jar cssparser-0.9.5.jar and perform various operations on the data. public static Map<String, CSSStyleRule> parseCSS(String FileName) throws IOException { Map<String, CSSStyleRule> rul ...

javacss

Adapting CSS according to input selection

Forgive me for asking what may seem like a simple question. I am currently using the CSS code below to modify the background color of a label when its associated checkbox is checked: #project input[id="button1"]:checked + label {background-color:red;} Is ...

css

Having additional space preceding list elements within a flexbox setup

Check out the code snippet below: HTML Code <ul class="menu"> <li><a href="#">Item 1</a></li> <li> <a href="#">Item 2</a> </li> <li> <a href="#">Item 3</a> </li& ...

htmllistcssflexbox

require an array that contains an embedded object

When making a post request, I need to include an array with an object inside. I have observed that adding new properties inside an object works fine. However, when attempting to add properties while the object is inside an array, it does ...

javascripthtmlarraysreactjsredux

Can we use ToggleClass to animate elements using jQuery?

I have a section on my website where I want to implement an expand feature. I am currently using jQuery's toggleClass function to achieve this effect. jQuery('.menux').click(function() { jQuery(this).toggleClass('is-active&a ...

javascriptjquerycss

How can you implement code that responds differently based on whether the user clicks the OK, cancel, or close button in a confirm dialog

What are three buttons in a confirm dialog box? How can JavaScript be used to perform different actions when the "ok" and "cancel" buttons are clicked, without performing any action when the dialog box is closed? ...

javascripthtmlconfirm

Choose from a variety of options for color schemes and hover effects

Looking to create a selector where users can pick a color. I tried changing the background color for each option, but when hovering over them, the background turns blue - which is not what I want. Check out the pictures for clarification: https://i.sstatic ...

htmlcssangularbootstrap-4

Step-by-step guide on how to have an AngularJS controller run continuously every 5 seconds once it has been initially called

My angular js file (app.js) contains the uuidCtrl controller, which triggers when called. When I want to call the controller 2 times, I have to load the page twice. However, I am looking for a solution to run it continuously after the first time it is call ...

javascriptangularjshtmlibeaconmonaca

What is the best way to design an HTML table that features alternating colors for each row and column?

I recently came across this image showcasing a beautifully designed table: https://i.stack.imgur.com/6K63q.png The current HTML code I have applies colors to every even line, including the year columns and subcolumns. Is there a way to assign unique mixe ...

htmlcss

Styling Your Website: Embrace CSS or Stick with Tables?

My goal is to create a layout with the following features, as shown in the screenshot: The main features include: The screen is divided into 3 regions (columns); The left and right columns have fixed widths; The middle column expands based on the browse ...

htmlcss

Spinning in a clockwise direction for 180 degrees, followed by a full

I am seeking a solution to rotate a cog icon clockwise by 180 degrees when activated with the class "cards__cog cards__cog-active" and then rotate another 180 degrees clockwise back to its deactivated state using the class "cards__cog cards__cog-inactive". ...

csscss-animations

Ways to align items in the middle of a list

I'm having trouble figuring this out. How can I properly center list items within the ul? body {margin: 0} ul { width: 1000px; margin: 0 auto; padding: 0; list-style-type: none; margin-top: 30px; overflow: hidden; background-color: # ...

htmlcsshtml-listslistitem

Tips for consistently positioning a div beneath another div in HTML/CSS

Would appreciate it if you could review this. <.div id="main"> Main Div <./div> <br/> <.div id="sub">Sub-Division<./div> ...

jqueryajaxcss

The issue with the functionality of position absolute in CSS when used with JavaScript

<html> <head> <style> #wrapper{ position: absolute; top : 250px; width: 500px; height: 500px; border: 1px solid red; } .tagging{ position: absolute; border: 1px solid black; width : 20px; height: 30px; } & ...

javascriptcss

Using a combination of PHP and HTML, you can successfully transfer and save a

I am having trouble uploading a file to the server in PHP and HTML using move_uploaded_file(). When I use this URL , the process is successful. However, when I use this URL , the process fails. Here is my PHP code: <?php if (isset($_FILES['image& ...

phphtmlfileserverupload

difficulty encountered when transmitting data via ajax to an express server

Just starting out with backend and ran into an issue when trying to send data using vanilla ajax to my express server. Can anyone spot where I might be making a mistake? Here is my ajax request: var xhttp = new XMLHttpRequest(); xhttp.onload ...

htmlnode.jsajaxexpress

What are the best methods to activate grayscale and transition effects on Firefox and Internet Explorer?

In order to achieve a grayscale effect for all images on Internet Explorer 10 and IE 11, I came across a helpful solution in this post: internet explorer 10 - howto apply grayscale filter?. However, the method provided is only for a single image. How can I ...

css

Show concealed content for individuals who do not have javascript enabled

One of the challenges I faced was creating a form with a hidden div section that only appears when a specific element is selected from a list. To achieve this, I utilized CSS to set the display property of the div to 'none' and then used jQuery t ...

javascripthtmlcss

Internet Explorer and Edge browsers are concealing box shadow behind the parent div

When using an input slider range, the box-shadow is being applied to the active thumb in all browsers except for IE & EDGE. In these browsers, the shadow is cutting or hiding behind the parent div #c. I have already tried setting overflow:visible on the p ...

htmlcss