The area surrounding inline content, both above and below

Can you explain the space above and below inline content?

This phenomenon can be seen here:
http://jsbin.com/vertical-spacing-weirdness/

If you look closely, there is a white area between the div/table and the span even though the span does not have any padding or margin applied.

An interesting observation is that this space disappears when using a transitional doctype:
http://jsbin.com/vertical-spacing-weirdness/2/

It's worth noting that in Firefox, the space appears in Transitional mode when using a pixel font-size value that is divisible by 4 (4px,16px,20px, etc.).

Edit- Resolved Issue / Explanation

After further investigation, it seems that the issue arises from having different font sizes for the parent (div or table) and the child (span). With strict doctype styling, the div height adjusts to accommodate text within the div but not in the span. Therefore, in both examples below, the div will have the same height:

<div>text<span>...</span></div>

<div><span>...</span></div>

On the other hand, with transitional styling, the div will only be as tall as necessary. In the second example, it will match the font size of the span since there are no characters matching the font size of the div.

The anomaly in Firefox regarding font sizes multiples of 4 remains puzzling.

(Tested on 23.0.1 & nightly: 26.0a1 (2013-08-31))

If my explanation was unclear, feel free to ask for clarification.

htmlcssxhtml-1.0-strictxhtml-transitional

Answer №1

Consider applying the font-size to the parent element rather than the span itself, for example using the CSS rule: div div {font-size:13px;}

Answer №2

Fix the following CSS code in your stylesheet:

span {
    background: none repeat scroll 0 0 #9999FF;
    display: inline-block;
    font-size: 13px;
}

To resolve the issue at this URL http://example.com/weird-vertical-spacing, update the CSS as shown below:

table {
    border-spacing: 0;
    display: block;
    font-size: 13px;
}
span {
    background: none repeat scroll 0 0 #9999FF;
    display: inline-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

Internet Explorer: JQuery deselects radio button upon its selection

One issue I have encountered is with a listener for a group of radio buttons in IE. When a radio button is selected, it triggers a database call to populate a select element. However, in IE, after the code runs successfully, the selected radio button becom ...

javascriptjqueryhtml

Having trouble implementing a transition on a dropdown menu in React

Can anyone help me troubleshoot an issue with adding a transition to a select box that appears when clicking on an input field arrow? I have tried implementing a CSS transition property, but it doesn't seem to be working. Any suggestions on what might ...

javascripthtmlcssreactjssass

A guide on retrieving values from programmatically created input elements in Java

Here's the HTML code that I am currently working with: <form method="get" action="#" id="startForm"> <input type="text" name="period" id="period" placeholder="The number of days"/> <input type="submit" name="submit" value="subm ...

javascripthtmlfor-loopdom

Using FieldSet in ASP.net Forms

Utilizing the FieldSet element in my web application requires me to customize its style. I aim to change the border color to blue and make the legend bold in color. Any guidance on how to achieve this would be greatly appreciated. Thank you in advance. ...

htmlcss

I am struggling to remove the div from its normal flow as it stubbornly remains positioned below

Is there a way to add a "contact" card to my website's right-top corner in a sticky position? I currently have a div block in that area which is blocking the contact card. Can anyone suggest a solution for this? https://i.stack.imgur.com/umC7B.jpg &l ...

htmlcsstwitter-bootstrap

Failed attempt to change background color using jQuery

Creating a new notification system where I need to highlight a specific comment once it has been scrolled to. I initially thought of implementing a background color change timeout, but I'm facing some issues with it... Check out this example: I hav ...

javascriptjquerycss

Exploring the possibilities of using rem, em, and px for setting image dimensions

I am in need of clarification on the use of different units for image dimensions. Despite my research, I have not been able to find a consistent answer. Some sources suggest using only rem/em instead of pixels, but I am unsure if this also applies to image ...

htmlcss

Submission handling with JQuery forms is not functioning

Currently troubleshooting my jQuery contact form submission handler. For some reason, the code isn't working as expected and I'm not sure where the issue lies. Upon form submission, there should be a success or error alert displayed, but nothing ...

htmljquery

Struggling to send an object through a node route for rendering a page?

Currently tackling a node.js project using express.js. I have a route that renders an ejs page and passes along the team object. Strangely, when I try to access <%= team.member.name %>, it returns as undefined despite the information being present. A ...

javascripthtmlnode.jsexpressejs

Convert an HTML table into an Excel file using PHP

After successfully generating DATA from PHP into an HTML table format, I utilized the code below to export it to EXCEL: header('Content-Type: application/vnd.ms-excel'); header('Content-Disposition: attachment;filename="BASIC_Data.xls"&apos ...

phphtmlexcel

Need help altering the CSS style of a button once the mouse is released from the :active pseudo class? Look no further!

Is it possible to change the style of an element, such as a button, immediately after the :active pseudo-class is triggered? I noticed that on "Facebook" in their "Sign Up" button, when you click on it and release your mouse, the button background turns ...

cssbuttonmouseevent

Determining the dimensions of form elements in an inline layout using Bootstrap 3.1

Currently in the process of upgrading my application from version 3.0 to 3.1. The application is still in its initial phase, resembling more of a prototype with only a few pages created. Therefore, I didn't anticipate encountering many issues during t ...

htmlcsstwitter-bootstraptwitter-bootstrap-3

Eliminating the Skewed Appearance of Text in Input Fields Using CSS

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Customized Page Layout</title> <script src="https://c ...

javascripthtmljquerycss

Is it possible to automatically close navigation dropdowns when the screen size changes?

I am using a bootstrap 4 navbar with dropdowns that open with CSS animation/fade-in on desktop, and a separate toggle button for mobile. Everything works fine, but when I open the dropdowns on mobile and then resize the window screen, they remain open whic ...

javascriptjqueryhtmlcss

Dynamic container elements (already arranged)

After creating a marksheet generator, I noticed that the divs positioned over an image on the resulting page are not responsive when trying to print. The print preview ends up looking strange and distorted. How can I make these already positioned divs resp ...

htmlcssresponsive

Tips for locating a file using javascript

My application scans a folder and displays all folders and HTML files inside it in a dropdown menu. It also shows any HTML files inside an iframe. There is one file named "highlighted.html" that should not appear in the dropdown menu, but if it exists in t ...

javascriptjqueryhtmliframe

Tips for keeping images stationary while expanding on hover

Currently, I am in the process of developing my first website. My main goal is to create an image gallery that displays thumbnails of images and expands them when you hover over each one. Initially, I adjusted the sizes of the images to 100px*100px using H ...

htmlcssimage

Creating a floating div that remains in place without disturbing the layout of the surrounding elements on

I am trying to place a div within a page at specific coordinates without affecting the rest of the content on the page. My initial approach was to give the parent container a position: absolute and the floating div a position: relative, then setting the p ...

htmlcss

Experiencing a problem with XAMPP? Changes made to the code are not reflected after saving

Recently, I've encountered a strange issue with my XAMPP test server while working on a game project. Everything was running smoothly until I noticed that when I make changes to certain files in Notepad++ and save them, the updates are not being refle ...

javascriptjqueryhtmlxampp

Learn the steps for accessing and utilizing aria-label text in Google Chrome

Struggling with the aria-label attribute for blind users in Chrome. Can't seem to hear the aria-label text. Any insights on how aria-label behaves in Chrome or if I'm using the wrong approach? If I'm heading in the wrong direction or using ...

htmlcssgoogle-chromeaccessibilitymantine