What is the reason behind the rendering box overlapping its parent when span padding is applied?

Take a look at this jsfiddle for a demonstration: http://jsfiddle.net/FrJRA/1/ and observe how the border of the inner span extends beyond the boundaries of its containing div.

I have a basic understanding of what's going on. However, the question that remains is why. Why doesn't the div automatically adjust to accommodate the increased height of the span?

I am aware that applying display: inline-block would solve this issue. But I'm curious about the reasoning behind why using inline fails to expand the parent container as expected.

htmlcss

Answer №1

When it comes to inline elements, their dimensions are only affected by padding in the left/right directions, not the top/bottom. This is why you'll see changes in size on the sides but not at the top or bottom.

Update: I came across a section in the W3 specification that addresses this issue.

According to the W3 spec, the vertical padding, border, and margin of an inline, non-replaced box start at the top and bottom of the content area, independent of the 'line-height'. The height of the line box is calculated using only the 'line-height'. CSS 2.1 Spec

Answer №2

When it comes to influencing layout, inline elements are simply not designed for that purpose. This is why the block or inline-block elements will have an impact on layout, but the inline span will not.

Answer №3

It's important to note that the <div> is not intended to change its size in this scenario, as the <span> is an inline element.

If you are seeking that specific functionality, you can modify it by:

div, span {
    border: 1px solid gray;
}

and adding overflow:auto; like so:

 div, span {
     border: 1px solid gray;
     overflow:auto;
}

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

Using setTime in JavaScript allows for customizing and adjusting the

I'm having trouble getting this code to display the time. I thought it would work, but it's not showing the time. Can someone please help me figure out what's going wrong? function startTime() { var currentTime = new Date(); ...

javascripthtml

Creating a React component for a button that toggles between 3 different

Looking to create a button with 3 different states that handle click events and send values. The states needed are: Non-favourite Favourite Uber-favourite Attempted using this.state.count + 1 to represent the levels but faced challenges. Unsure if this ...

javascriptcssreactjs

if jade is being inconsistent

I am currently using expressjs in my app and have the following setup: app.get('/profile',index.profile); app.get('/',index.home); Within layout.jade, I have the following code: ... if typeof(username)!=='undefined' ...

cssexpresspug

A guide on resolving the 'Unexpected identifier array in JSON Parse Error' encountered during an AJAX Request

I'm currently working on setting up a Contact Form Validation and I require the variable $msg from a php script called 'sendEmail.php'. The actual mailing system is functional, as the script successfully receives form inputs from index.php a ...

javascriptphphtmlajax

Display a custom toast from a list using Bootstrap 5

I've been utilizing the toast feature from Bootstrap, and it works perfectly when displaying a single toast. However, I encountered an issue when trying to display a specific toast, like an error toast, from a list of predefined toasts. It ended up sh ...

csstoastbootstrap-5

Guide to animating the height of a div using jQuery:

I'm hoping to create a cool animation effect where a certain part of a div expands to 100% width when clicked, and then reverts back to its original height on a second click. I've tried writing some code for this, but it's not working as exp ...

javascriptjqueryhtmlcssanimation

How to choose an item from a dropdown menu using cssSelector in Java webdriver

When I click a button to open a drop-down menu, I am attempting to select specific elements in webdriver. The button clicks fine and the dropdown pops down successfully. WebElement providers = driver.findElement(By.id("providers")); providers.click( ...

javacssseleniumcss-selectorswebdriver

Having difficulties including the Stack Overflow website within an iframe

I've been attempting to embed the Stack OverFlow website into an HTML page using an iFrame, but I'm running into some issues. Oddly, when I tried embedding my other two websites, they displayed correctly, but Stack OverFlow is not showing up on m ...

javascripthtmliframe

Are desktop values taking precedence over the mobile media query?

Currently, I am facing an issue with aligning icons (images) under each title on a page that lists various classes. The icon needs to be centered below the title on both desktop and mobile versions of the site. However, I have encountered a problem where u ...

htmlcssimagealignmentcenter

Having trouble retrieving cell values from a table using tr and td tags in C# Selenium is causing issues

I'm facing an issue where my code is unable to retrieve the cell value and instead throws an exception stating: "no such element: Unable to locate element: {"method":"xpath","selector":"html/body/div[2]/div[2]/table/tr[1]/td[0]}" Below is the HTML ma ...

c#htmlselenium

Unable to integrate Tailwind CSS in project

Having a bit of trouble with my HTML using Tailwind post CSS. Even though I have installed all necessary packages and linked the CSS, the classes don't seem to be applying. Here is a snippet from the tailwindconfig.js file: module.exports = { conte ...

csstailwind-csspostcss

Spotlight on THREE.Line within the framework of three.js

Is there a way to achieve a visual effect similar to increasing the width of a THREE.Line beyond 1? I have contemplated drawing multiple lines side by side, but this would add more vertices to all my lines, so I see it as a last resort. Another idea I ha ...

javascripthtmlthree.js

Having trouble with CSS text-align right not functioning properly? Here's how you can fix it

<div style="text-align: left;width: 21cm;"> <h4 style="text-align: center;font-weight: bold;font-size: 20px;margin: 0">Tax Invoice(Center) <span style="text-align: right;"> For Customer(Right)</span></h4> </div> I n ...

javascripthtmlcss

What is the art of spinning a div?

Looking to add an interactive circular div on my website that can be spun like a wheel of fortune using the mouse. I tried using jQuery drag without success in rotating the div. Is there a method to rotate div elements with the mouse? It would also be awe ...

jquerycsscss-transitions

Align a component vertically in a FlexBox using Material UI

I have a React app where I created a card with specified min width and height, containing only a header. I want to add flexbox that occupies the entire left space with justify-content="center" and align-items="center". This way, when I insert a circular pr ...

cssreactjsflexboxmaterial-ui

Insert a new HTML element only if it is not already present

<p id="main_class"> <span class="new_class"></span> </p> In this code snippet, I am attempting to append <span class="new_class"></span> to the element with the id of main_class. If the span element with the class o ...

javascriptjqueryhtml

Two elements failing to display side by side

Can someone help me figure out how to align the quantity and Add-to-cart button on the same line? The quantity is displaying as a block element even though I set it as inline... any suggestions would be appreciated! Visit this link for reference. I' ...

csswordpresswoocommerce

When you hit a certain point on the website, the scrolling momentarily pauses

Upon refreshing the page and scrolling down, I notice that the website experiences a brief lag for a few milliseconds before continuing as normal. Oddly enough, this issue only occurs after refreshing the page. Any suggestions on how to resolve this? Th ...

javascripthtmlcssweb

How can I use Python Selenium to replicate the styles of elements in Chrome?

Looking at this image, we can manually extract styles using copy > copy styles from Chrome. But is there a way to achieve this using Selenium? https://i.sstatic.net/3XzsT.png Although this guide explains how to obtain the CSS value of a specific eleme ...

pythoncssseleniumgoogle-chrome-extensiongoogle-chrome-devtools

Jquery Error in Bootstrap and DataTables Integration

My knowledge of frontend coding is limited, so please bear with me. Initially, my website was using MVCContrib grid along with its own CSS style. Recently, I switched to Bootstrap which caused MVCContrib to stop working. I've been struggling to integ ...

csstwitter-bootstrapdatatables