Font sizes for inline elements can be customized with gaps

Having trouble with setting font-size styles for inline elements, causing unexpected gaps to appear. Despite finding related questions on this issue, I have yet to discover a solution that fits my specific case.

Here is the code in question:

<!doctype html>
<html>
    <style>
        .container {
            font-size: 40px;
        }

        p {
            margin: 0;
        }

        .small {
            font-size: 16px;
        }
    </style>
    <body>
        <div class="container">
            <p>Big text</p>
            <p>
                <span class="small">
                    Small text
                </span>
            </p>
            <p>
                <span class="small">
                    Small text
                </span>
            </p>
        </div>
    </body>
</html>

Is there a way to eliminate the additional vertical gaps without altering the existing HTML markup and only applying new CSS to the container div and its children?

Attempts at using vertical-align:top and line-height:0 have not yielded the desired outcome.

The desired result:

https://i.sstatic.net/GTo1j.png

The current output:

https://i.sstatic.net/wLstp.png

htmlcss

Answer №1

Here is a solution for you! Simply include .small {display: block} in your CSS and your changes will be applied.

<!doctype html>
<html>
    <style>
        .container {
            font-size: 40px;
        }

        p {
            margin: 0;
        }

        .small {
            font-size: 16px;
            display: block;
        }
    </style>
    <body>
        <div class="container">
            <p>Big text</p>
            <p>
                <span class="small">
                    Small text
                </span>
            </p>
            <p>
                <span class="small">
                    Small text
                </span>
            </p>
        </div>
    </body>
</html>
working fiddle: https://jsfiddle.net/y7edz1tj/

Answer №2

The font size for the p tags remains at 40px, with only the small class affecting the spans. To ensure a consistent order of elements, you could set the font size to 16px for all p tags and to 40px for the first p tag.

<!doctype html>
<html>
    <style>
        .container {
            font-size: 40px;
        }

        p {
            margin: 0;
            font-size: 16px;
        }
        
        p:first-child {
            font-size: 40px;
        }

        .small {
            font-size: 16px;
        }
    </style>
    <body>
        <div class="container">
            <p>Big text</p>
            <p>
                <span>
                    Small text
                </span>
            </p>
            <p>
                <span class="small">
                    Small text
                </span>
            </p>
        </div>
    </body>
</html>

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

Repair the navigation bar once it reaches the top of the screen using ReactJS

I have a webpage that contains specific content followed by a bar with tabs. My goal is to have this bar stay fixed at the top of the screen once it reaches that position while scrolling down, and only allow the content below the fixed bar to continue scro ...

javascripthtmlcssreactjstailwind-css

What is the best way to gather Data URI content through dropzone.js?

I am currently utilizing Dropzone for its thumbnail generation feature and user interface. However, I am only interested in using the thumbnail generation ability and UI and would prefer to collect all the data URIs myself and send them to the server via a ...

javascriptangularjshtmldropzone.js

Tips for rearranging table columns using drag and drop in react js

I have been experimenting with various libraries to create a drag-and-drop feature for changing table columns order. Here is my current implementation: import React, { useState } from 'react'; import './list_de_tournees.css' const Table ...

javascripthtmlreactjshtml-tabledrag-and-drop

Delete the browsing cache in Internet Explorer from an external source

Currently, I am working on developing an ASP.NET application using Visual Studio. However, a persistent issue I am facing is that every time I launch the application, Internet Explorer caches certain CSS and JS files. This forces me to manually clear the c ...

javascriptcssvisual-studio-2010internet-explorer

Silver button seems blue on iPhone

After creating this html code for a blue login button: <div class="p12"> <input type="submit" value="Log In" class="button loginButton"> </div> I added the following CSS style to it: .loginButton { background-color:#627aad; border:1px ...

htmlcssiphone

Hover effects using CSS3 transitions for the content before

Greetings everyone, I apologize for any language barriers. The title may not be clear at first glance, so let me explain what I am attempting to achieve. I have a navigation menu structured like this: <nav> <ul> <li>& ...

csscss-transitions

Steps for placing an image within the boundary of a rectangular div

My div has a width of approximately 730px and a height of 50px. I am looking to place an image at the bottom of the div, exactly where its height ends - after 50px. I have been considering a query to append the image at the bottom. One solution could be ...

csshtml

What is the best way to showcase my background image using html and css?

I've come across a similar topic addressing my problem, but I am still unable to resolve it. I am attempting to add a background image to my portfolio, but for some reason, it is not working. Can anyone offer any suggestions or ideas? Here is the cod ...

htmlcssbackground-image

Ensuring the accuracy of HTML sliders

I am just starting out with programming and currently working on an online experiment using Django. In our experiment, sliders are being used extensively as input devices. We are trying to figure out a way to validate the sliders to ensure that participan ...

htmldjangoslider

Arranging elements in a row and column to ensure proper alignment

https://i.stack.imgur.com/LMsTg.png I'm having trouble aligning the UI elements in my Bootstrap 5 project. I can't seem to pinpoint the issue despite trying various solutions. Here's the code snippet: <div class="container"> ...

csslaravelbootstrap-5

a dynamic framework that fills out several forms

I am in search of a way to streamline the data entry process for my awards database. Currently, my "people" table consists of five fields: peopleid first middle last display For example, an entry could look like this: peopleid 120 first William middl ...

phpmysqlhtmlajax

Utilizing CSS3 to perform multiple 3D rotations

I am attempting to rotate a face of a cube twice in order to have that face fall flat on one side. For reference, please see the illustration of my goal here: https://i.stack.imgur.com/kwO8Z.png I have included my current progress below, using a 45-deg ...

google-chromecsswebkitwebkit-transform

SwipeJS experiencing technical difficulties

My Swipe.Js version : "^7.0.2" Today, I attempted to use Swipe.Js and encountered an issue with my import code. import { Swiper, SwiperSlide } from 'swiper/react'; as described on https://swiperjs.com/react#installation. However, when ...

javascriptcssreactjsswiper.js

Optimal method for storing website information in a database through Django while utilizing a singular template for all web pages

I'm in the process of creating a website where the majority of the content will have a similar format and layout. I plan to use a single template for each post, with the actual content being stored in a database. The content will consist of HTML para ...

pythonhtmldjangodatabase

Aligning two items to the right along the vertical axis, even if they have different heights (Bootstrap

I am facing an issue with aligning two links (one text and one image) to the right and ensuring that the bottom of each is vertically aligned. Currently, they appear like this: (vertically aligned with each others' tops) Here's the relevant HT ...

htmlcsstwitter-bootstrapcss-floatvertical-alignment

form controls disappear upon adding form tags

Currently experiencing an issue with angular and forms that I could use some help with. I have a dynamic form that is functioning properly, but now I need to add validations to it. After following this guide, I established the structure correctly. Howeve ...

javascripthtmlangularjsforms

Stylesheets per module in Angular 2

For my website design, I've decided to adopt a modular structure using sass. To ensure consistency throughout the module, instead of defining stylesheets at the component level, I plan to define them at the module level and import them into each compo ...

cssangularsass

Is there a way to align these buttons in the middle?

I am currently designing a webpage at The challenge I'm facing is: How can I center those buttons on the page? They need to remain centered and responsive even when the page is resized. Additionally, the spacing between the buttons is inconsistent. ...

htmlcsstwitter-bootstrapbuttonresponsive-design

ReactJS presents an issue where buttons on the navigation bar are not properly aligned

I am currently utilizing the navbar component from Bootstrap 5, and I've encountered a UI problem. What is my current setup? This is the existing structure of my navbar: https://i.sstatic.net/eETzd.png What is my desired outcome? I aim to have the n ...

javascripthtmlcssreactjsbootstrap-4

Tracking the progress bar as files are being uploaded via AJAX using HTML5

Currently, I have a progress bar that increments based on the number of files and their sizes. I am looking to implement an overall progress bar to display while uploading files to the server using AJAX and HTML5. Each file is uploaded individually to th ...

javascriptjqueryajaxhtml