Excessive white space at the bottom of a floated image within a small parent element

I need help with styling a page that will only be viewed on mobile Safari. The HTML markup is as follows:

<blockquote>
  <p><img src="..."/> A paragraph...</p>

  <p>...</p>

  ...
</blockquote>

Here is the CSS used:

blockquote {
  border-left: 1px solid #888;
}

blockquote img {
  float: left;
  margin: 0 20px 20px 0;
}

With long paragraph text, the desired effect is achieved:

| IMAGE  A paragraph, blah blah blah...
| IMAGE  blah blah blah...
| IMAGE  
|        More paragraph, blah blah blah...
| blah blah blah, blah blah blah...

You can view an example here.

The whitespace between the image and text is important, but when the paragraph text is short, there is an unwanted margin at the bottom which stands out due to the left border line:

| IMAGE  A paragraph, blah blah blah...
| IMAGE  blah blah blah...
| IMAGE  
|

You can see this issue in action here.

If you have any suggestions on how to solve this problem without requiring all quotes to be long enough, please share. Even a JavaScript solution would be acceptable. Thank you!

javascripthtmlcssiossafari

Answer №1

Modify the following:

blockquote img {
  float: left;
  margin: 0 20px 20px 0;
}

to this:

blockquote img {
  float: left;
  margin: 0 20px 0 0;
}

UPDATE:

I removed the following and it appeared to solve the issue:

blockquote:after {
  content: "\0020";
  display: block;
  height: 0;
  clear: both;
  visibility: hidden;
}

The problem was that this hidden element came after the image with clear:both, causing the blockquote to be tall enough to contain both text and image. To visualize, add a temporary border to the blockquote:

blockquote {
    border: 1px solid #00ff00;
}

I chose neon green because it stands out and is not commonly used, making it easy to spot any leftover debug code.

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

Ways to develop a dynamic HTML TransferBox featuring a custom attribute

I am in need of developing a customized transferbox using HTML, JavaScript, and JQuery. The user should be able to select from a list of options and associate them with attributes. This selection process should involve transferring the selected options be ...

javascriptjqueryhtml

Application Path-related Relative Path Problem in MVC Deployment

During the deployment of my MVC Project, I encountered a relative path issue in terms of the server. The project is being hosted as an application in IIS. Once deployed, the URL to access the application will resemble http://localhost/portal/Account/Login. ...

javascriptjqueryasp.net-mvcasp.net-mvc-3iis-7

Renaming errors within a project with a complex nested structure using npm

I am encountering an issue in my NodeJS project which consists of nested subprojects with their own package.json files. Whenever I make changes to dependencies in the subprojects, I encounter errors similar to the one below: npm ERR! code ENOENT npm ERR! ...

javascriptnode.jsnpm

Is there a built-in constant in the Angular framework that automatically resolves a promise as soon as it

I'm facing a situation where I have code that checks a conditional statement to decide if an asynchronous call should be made. If the condition is not met, the call is skipped. However, I still need to perform some final action regardless of whether t ...

javascriptangularjs

Mapping an array using getServerSideProps in NextJS - the ultimate guide!

I'm facing an issue while trying to utilize data fetched from the Twitch API in order to generate a list of streamers. However, when attempting to map the props obtained from getServerSideProps, I end up with a blank page. Interestingly, upon using co ...

javascriptnext.js

Discover the magic of observing prop changes in Vue Composition API / Vue 3!

Exploring the Vue Composition API RFC Reference site, it's easy to find various uses of the watch module, but there is a lack of examples on how to watch component props. This crucial information is not highlighted on the main page of Vue Composition ...

javascripttypescriptvue.jsvuejs3vue-composition-api

A versatile Material UI paper that adjusts its dimensions dynamically

Utilizing Material-UI's Paper component (https://mui.com/components/paper/), I've encountered a scenario where the content within the Paper element needs to be dynamic. <Paper className="modal" elevation={3}> ...Content </Paper ...

javascriptcssreactjstypescriptmaterial-ui

Utilizing JSDoc for establishing an index signature on a class in ES6

When working with JSDoc, achieving the equivalent of Typescript's computed property names can be a challenge. In Typescript, you'd simply define it like this: class Test { [key: string]: whatever } This syntax allows you to access these comput ...

javascripttypescriptjsdoces6-classindex-signature

uib-datepicker-popup allowing for changing minimum mode dynamically

Is there a way to dynamically set the minMode of an Angular Bootstrap Datepicker? I managed to achieve this using the following code: <input type="text" ng-model="myDate" uib-datepicker-popup="{{datepickerFormat}}" datepicker-options="{& ...

javascriptangularjsdatepickerangular-ui-bootstrap

Saving Arrays through an Input Form in JavaScript

I am working with an HTML form that looks like the following: <div class="form-group"> <label for="first_name">1st Name</label> <input type="text" id="first_name" placeholder="First Name" class="form-control"/> </div> ...

javascriptjqueryhtmlajaxforms

The text within the button disappears when in the :before state

After implementing the code from this codepen, I decided to use the 3rd button design. .btn { line-height: 50px; height: 50px; text-align: center; width: 250px; cursor: pointer; } .btn-three { color: #FFF; transitio ...

htmlcssbuttonhover

Is there a way in jqGrid to invoke a function once the subGridRowCollapsed operation finishes?

I'm currently working with jqGrid's subgrids and I need a solution for invoking a specific method after collapsing a subgrid. Currently, my implementation is as follows: subGridRowCollapsed: function (subgrid_id, row_id) { adjust_slider_posi ...

javascriptjqueryjqgrid

What is the method for modifying the text color of P tags within a div element?

I'm having trouble changing the text color of the P tags in the card-header section for some reason dashboard.html <div class="container"> <div class="card"> <div class="card-header"> <p& ...

htmlcss

Comparison of the "Proposed Recommendation" versus the "Candidate Recommendation"

In a recent piece about HTML5, it was mentioned that the Proposed Recommendation date is set for 2022, while the Candidate Recommendation date is from 2012. I'm curious to understand the distinction between the "Proposed Recommendation" and the "Cand ...

htmlw3c

JavaScript / Regular Expression: remove the initial <p> tag if it meets a specific condition

Whenever I receive HTML content from the API, it may come in different formats. Sometimes, it looks like this: <p>::type/12</p> <p>Some content</p> <p>Some more content</p> Other times, it might not have the first para ...

javascriptregex

Arranging xCharts based on the weekday order

Struggling with xCharts, specifically trying to display a bar chart showing numbers with corresponding days of the week in order. Despite my efforts, I can't seem to get them to appear in the correct sequence. Refer to the image below for reference: ...

javascriptjqueryjsonchartsbar-chart

The necessity of ExpressJS

After reviewing the Express.JS 4.x API documentation, I became intrigued by their setup process. Here's my interpretation of how it works: In the provided sample code snippet from the Express.JS 4.x API, the express module is first imported and stored ...

javascriptnode.jsexpress

What is the best way to gradually transform a continuously shifting text color into a single, consistent hue?

Hey there, wonderful people of StackOverflow! I am absolutely stumped and cannot figure out how to smoothly transition this color-changing text from its current state into a different solid color when the submit button is clicked. Is there a skilled indiv ...

javascriptjqueryhtmlcssanimation

transferring data from a web page to a php script seamlessly without navigating away

I've already spent a significant amount of time searching on Stack Overflow and Google, but I haven't found a solution that works for me. My issue is that I have an HTML form and I need to send the data to PHP without redirecting or leaving the ...

javascriptphpjqueryhtmlajax

One way to enhance user experience is by passing parameters dynamically from the database when an element is clicked. This allows for the retrieval of

Earlier, I tried to post a question but couldn't get it working due to incorrect code. As the title suggests, my objective is to retrieve data from a database and display it in a div. The idea is that when this data is clicked, it should be passed to ...

phpjavascriptajaxjquery