Tips for addressing the issue of line height causing padding at the bottom of divs

I am facing an issue on my website where I need to create <div> elements that expand to display images and a title. My current approach involves a structure like this:

<div class="thumb">
    <img src="image_url"/>
    <div id="title">title</div>
</div>

and the title is positioned using the following CSS:

#title{
    position: absolute;
    bottom: 0;
    left: 0;
}

However, the title <div> ends up below the image. I attempted adjusting the line-height property within the div, which solved the issue of text spilling over the image but caused problems with text padding. Is there a better way to correctly position the title at the bottom right corner of the image?

For reference, here is a link to a jsfiddle illustrating the problem:

http://jsfiddle.net/BUpmr/3

paddingcss

Answer №2

To easily move an element up from the bottom by a specified number of pixels, use the following CSS code:

.custom-element
{
    position: relative;
    top: -10px;
    background-color: #00f;
    padding: 5px 8px;
}

http://jsfiddle.net/CRvbm/9/

Answer №3

The white space at the bottom is not caused by line height, but rather by the browser attempting to align the image's bottom with the text baseline.

To resolve this issue, simply add vertical-align: top to the image CSS properties: http://jsfiddle.net/VRyCF/2

Answer №4

Your design is currently using position: absolute, which removes elements from the document flow. To ensure that both the image and text elements take up space, consider using position: relative instead.

For a live example, check out http://jsfiddle.net/BUpmr/13/

  1. Eliminate position: absolute; from the body in your CSS
  2. In #title, switch position: absolute to position: relative;
  3. Include width:600px for your elements (since the image is 600px wide), or adjust the width on #title to 550px for better alignment
  4. Add text-align: right to #title for positioning the text in the right corner
  5. Integrate .thumb img {display:block;} into your code

CSS:

    body {
        background-color: #eef;
        padding: 0px;
        margin: 0px;
    }

    #title{
        position: relative;
        text-align:right;
        width:550px;
        bottom: 0;
        right: 0;
        background-color: #0f0;
        padding: 0px 4px 0px 4px;
    }

    .thumb{
        background-color: #f00;
            width:600px;
    }

   .thumb img {display:block;}

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

Dimensions of date input field in Chrome browser on Windows

Having an issue with my code, I've created a fiddle to demonstrate the problem. You can view it here: http://jsfiddle.net/jmTqk/2/. The blue block blocks the spin button and datepicker dropdown link. It seems to only occur on Windows Chrome. I also c ...

csswindowsgoogle-chromewindows-7windows-xp

Setting a uniform width for all columns in a table using ReactJS

When working with variable amounts of data displayed as columns in a table, I struggled to maintain fixed widths for each column. Despite my efforts, the columns would stretch based on available space rather than obeying the specified widths. For example, ...

cssreactjshtml-tableflexboxmaterial-ui

Basic Jquery CSS style requests

Can you help me troubleshoot this issue? var hover = $('<img />').attr('src', hovers[i]).css('position', 'absolute') I'm having trouble getting th ...

jquerycss

Adjust the overflow to automatically decrease at regular intervals

Is there a way to make the scroll automatically move down a bit every few seconds, revealing more text in the process? Here's an example of how I want it to work: http://jsfiddle.net/Bnfkv/2/ ...

javascriptjqueryhtmlcss

Unique arrangement of hexagons in a honeycomb layout with precise centering

Currently, I am having trouble creating hexagonal blocks with content in a specific layout. My goal is to have four blocks starting with one at the top, followed by a row of two, and finishing with a row of one as shown in the image below. Unfortunately, a ...

cssresponsive-designhexagonal-tiles

Altering the display attribute cancels out any opacity transitions

When using JavaScript to change the opacity of an element with transition: opacity 1s, the expected duration of one second is met, as demonstrated here: onload = e => { var p = document.getElementsByTagName("p")[0]; p.style.opacity = 1; }; p { ...

javascripthtmlcss

Tips for creating a unique custom UI headline using ReactJS, CSS, and bootstrap

Looking to create a design that is responsive in ReactJS using Bootstrap or CSS if needed. I need assistance with placing separators between columns and ensuring the values of each label are aligned in the same column but on the next line. The layout shoul ...

javascriptcssreactjsflexboxbootstrap-5

Are you interested in learning HTML/CSS and joining a class?

When working with HTML, you can use the TOP tag to quickly navigate to the top of a page. This got me thinking - is it possible to create a link on my webpage that will take users directly to a specific class using only HTML and CSS? I'm curious to kn ...

htmlcss

Controlling the Size of Images

I am currently dealing with a significant issue related to saving bandwidth and storage. My website (built on PHP/Laravel) features 5-6 different image sizes in the desktop view. Whenever a user uploads an image, I am required to save 7 versions of that i ...

phphtmljquerycsslaravel

Having trouble getting the custom font to display correctly in xhtml2pdf for a Django project

I'm having trouble incorporating a custom font into my PDF generated from HTML. Although I successfully displayed the font in an HTML file, indicating that the font path is correct and it's being used properly, the .ttf font type doesn't re ...

htmlcssdjangofont-facexhtml2pdf

Animating CSS when closing a modal box

I followed the instructions from a tutorial on W3Schools here to create this code. The "open model" button triggers the modal to open with a smooth CSS animation, which looks great. However, when I click the close button, the modal abruptly closes without ...

javascriptcssanimationmodal-dialog

Differences between using CSS custom properties in the :root selector versus the body/html tags

Why would you choose to define global CSS custom properties in the :root element rather than in the body or html tags? How might this decision impact the effects or performance of the page? ...

csscss-variables

Navigate between links by using the Tab key, while excluding certain links from the sequence

On my webpage, I have a main menu, various links in the main content area, and a left menu. The challenge is to make the website accessible for people who are blind... When using the tab button to navigate between links, the order currently goes as follow ...

htmlcss

Solving the enigma of CSS positioning: mastering floats, margin-left/right, and auto

Hey there, I'm having trouble posting an image but here is the link: I believe this explanation will be clearer, D2, D3 & D4 need to be aligned next to each other and centered on the screen at all times. (960px)      & ...

css

Clickable label for checkbox in Android browser is unresponsive

I've been experimenting with creating a responsive CSS menu using the checkbox hack Here's the HTML: <input type="checkbox" id="button" /> <label for="button" onclick>click / touch</label> <div> Change my color! </d ...

javascriptandroidjqueryhtmlcss

Tips for centring navigation horizontally and making it responsive using CSS

Is there an effective way to horizontally center the navigation within a div using responsive CSS? HTML: <nav id="centermenu"> <ul> <li><a href="#">Business</a></li> <li><a href="#">Spec ...

css

Troubleshooting Bootstrap's Horizontal Alignment Problem

https://i.sstatic.net/3OTLd.pngWhile working on my Spring Boot Web App, I encountered a slight alignment issue on the login page. The problem, as shown in the attached image, is that the div is not perfectly centered on the page. I am utilizing Bootstrap f ...

htmlcsstwitter-bootstrapcenter-align

I encountered an issue where I was unable to customize the styling of the

I'm facing an issue where I cannot override the style using `className` on a `Button`. Interestingly, the same style works correctly on a `TextField`. However, when I use the `style` prop, it allows me to successfully override the `Button` style. What ...

cssreactjsbuttonmaterial-uistyles

Experiencing trouble with aligning input fields in a Bootstrap layout

When working on a user interface design, I wanted to have different containers with various input type elements. However, I encountered an issue where the datetime picker in one row was not aligning properly with labels above and below it. <div class=" ...

cssbootstrap-4

Parallax Effect in CSS Background

I am currently working on my website at and have implemented a "parallax-bg" class to create a parallax background effect. Interestingly, the parallax effect is working flawlessly for the hero section at the top and the texture in the middle, but it&apos ...

jqueryhtmlcssparallax