What causes the discrepancy between 1px and 0px padding on floating divs in various web browsers?

Take a look at this HTML example - the only variation is

padding-top:0px; vs padding-top:1px;

However, in the second example, the div is shifted by a completely different amount?

<div style="clear: both; margin:0px; padding-top:0px; border: 0px">
    <div style="float:right;width:300px">
        <div style="margin:10px;border:1px solid silver">A Title</div>
        Sidebar<br />
        Sidebar<br />
        Sidebar<br />
        Sidebar<br />
        Sidebar<br />
        Sidebar<br />
    </div>

    <div style="">
        <div style="margin: 10px; border: 1px solid silver">A Title</div>
        Content<br />
        Content<br />
        Content<br />
        Content<br />
        Content<br />
        Content<br />
    </div>
</div>


<div style="clear: both; margin:0px; padding-top:1px; border: 0px">
    <div style="float:right;width:300px">
        <div style="margin:10px;border:1px solid silver">A Title</div>
        Sidebar<br />
        Sidebar<br />
        Sidebar<br />
        Sidebar<br />
        Sidebar<br />
        Sidebar<br />
    </div>

    <div style="">
        <div style="margin: 10px; border: 1px solid silver">A Title</div>
        Content<br />
        Content<br />
        Content<br />
        Content<br />
        Content<br />
        Content<br />
    </div>

Be well aware that testing has been done on various browsers including Chrome, Firefox, IE, and Safari, and there seems to be an obvious detail that I am overlooking.

Hopefully, someone with great insight can provide some assistance!

htmlcss

Answer №1

The definition of this behavior can be found in Section 8.3.1 on Collapsing Margins:

According to the specifications, when the top margin of an in-flow block element meets certain conditions, it will collapse with the top margin of its first in-flow block-level child.

It's important to note that without any padding, the top margin of the content column collapses as well.

Answer №2

Your issue stems from the concept of collapsing margins in CSS, a behavior that is consistently applied across all browser engines as defined by CSS standards.

In simple terms, when two elements with vertical margins touch, their margins collapse into each other to cover the larger margin value. However, adding padding to the top of the bottom element disrupts this margin collapse because there are no longer directly adjoining margins. As a result, the distance calculation includes both margins and the added padding.

For further details on the rules governing collapsing margins, refer to the CSS box model standards. Specifically, pay attention to criteria such as no line boxes, clearance, padding, or border separating the adjacent margins.

Answer №3

when you adjust the margin of the third div, it removes 10px from the top margin of its container

here's a suggestion to try out:

http://jsfiddle.net/7wnr4/

<div style="clear: both; margin:0px; padding-top:0px; border: 0px;">
    <div style="float:right;width:300px">
        <div style="margin-top:0px;border:1px solid silver">A Title</div>
        Sidebar<br />
        Sidebar<br />
        Sidebar<br />
        Sidebar<br />
        Sidebar<br />
        Sidebar<br />
    </div>

    <div style="">
        <div style="margin-top: 0px; border: 1px solid silver">A Title</div>
        Content<br />
        Content<br />
        Content<br />
        Content<br />
        Content<br />
        Content<br />
    </div>
</div>

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

Checkboxes display on a separate line when rendered inlines

I'm having an issue with the rendering of my checkbox in CSS. The checkbox is currently displaying on a separate line from the text, but I would like it to be inline with the rest of the content. For reference, here is the full CSS and HTML code: htt ...

htmlcss

You may encounter an error in cpanel due to the include path being set to '.:/opt/cpanel/ea-php70/root/usr/share/pear'

While testing my PHP application on WampServer (localhost), everything worked perfectly. However, when I uploaded the same application to my web server, I encountered the following issue: PHP Fatal error: require_once(): Failed opening required 'util ...

phphtmlincludecpanel

Migrating a few PHP scripts to ColdFusion

Hey there, I'm currently in the process of converting some really basic PHP code to be compatible with a development server that only supports CF. This is completely new territory for me, so I'm looking for some guidance on how to port a few thin ...

phpcssvariablescoldfusionporting

Is it possible to retrieve JavaScript object properties using HTML elements?

I have fetched an array of objects using jQuery.getJSON(). Each object should be represented by an HTML div element, allowing users to click on the element and access all properties of the corresponding object. What is the most efficient approach for achie ...

javascriptjqueryhtmlobjectarrays

Ways to display a collection of random images with a click of a button?

I've created a simple php webpage that is supposed to display random images from my images folder when a button is clicked. However, I'm facing an issue where no images are showing up and I can't seem to pinpoint the problem in my code. ...

javascripthtml

Evolving fashion trends

I'm looking to dynamically change the style of my HTML element based on screen size, similar to this example: <p [ngStyle]="{'color': isMobile() ? 'red' : 'blue'}">Lorem Ipsum</p> The code above triggers a m ...

htmlcssangulartypescript

What is the proper way to add multiple divs using jquery?

Is there a way to simplify this lengthy HTML code used for browser alerts? Here is an example: <div class="ie-message" style="display: block; "> <div class="alert error"> <h2> Sorry, your web-browser is outdated ...

jqueryhtml

I am interested in utilizing Selenium to interact with a hyperlink within an HTML table

I am currently using the code snippet below to fetch data from the HTML structure provided: //findTables(driver); WebElement content = driver.findElement(By.id("tblTaskForms")); List<WebElement> elements = content.findElements(By.className("form-nam ...

htmlangularjsseleniumselenium-webdriver

Creative Blueprint

Our company currently operates 3 browser based games with a team of just 4-5 coders. We are looking to enhance the collaboration within our coding team and streamline our processes. Considering the fact that our games are built using a mix of html, php, j ...

phpjavascriptcssxmlapplication-design

Ensure that the floating div is positioned along the right side and adjusts to accommodate the

I've been searching for a solution to this issue, but it seems like I might not be articulating it correctly because I haven't been able to find an answer yet. On my page, there is a 'quick links' button that is supposed to stay fixed ...

htmlcss

Access an HTML element and using JavaScript to make changes to it

As a new web developer, I am eager to create a grid of file upload zones on my site. I have decided to use DropZone.js for this project. I have customized DropZone and added multiple drop zones in the HTML. The grid layout consists of four rows with four ...

javascriptjqueryhtmlcssnode.js

Choose or deselect images from a selection

I am currently working on a feature for an album creation tool where users can select photos from a pool of images and assign them to a specific folder. However, I'm facing difficulty in selecting individual photos and applying customized attributes t ...

javascripthtmljquerycss

Is it possible to hide a div using Media Queries until the screen size becomes small enough?

Whenever the screen size shrinks, my navbar sections start getting closer together until they eventually disappear. I've implemented a button for a dropdown menu to replace the navbar links, but I can't seem to make it visible only on screens wit ...

javascriptjqueryhtmlcssmedia-queries

Unwanted extra border and padding are showing up at the bottom of my HTML

Recently, I decided to experiment with the jquery superslide plugin on a website of mine. To my surprise, there was an unexpected padding at the bottom of the page. My suspicion is that the display area is not being calculated correctly or that a margin is ...

jquerycsshtml

Tips for making sure custom fonts are loaded before running any JavaScript code

Upon loading my page, I run a JavaScript function to determine if specific text fits within its parent div. If it doesn't fit, then adjustments must be made. The text is styled with a custom font, which can be loaded either through @font-face or Goog ...

javascriptcssfonts

The conflict name has an impact on both the folder and the PHP file

Within my web directory, there exists a folder titled area-nursing that houses various PHP files along with a specific file named area_nursing.php. However, upon attempting to rewrite area_nursing.php as area-nursing using the .htaccess file, I encounter ...

phphtmlnaming-conventions

What is the best way to retrieve data from divs that are nested within another element using Javascript?

I am currently working on implementing a modal that will showcase specific information based on the event-card it originates from. Here is an HTML snippet showcasing an example event-card: <div class="event-card upcoming hackathon"> <d ...

javascripthtmljquerybootstrap-4

Initiate the video tag playback by using jquery.play() function

Is there a way to make the video start playing as soon as the overlaying absolute div has faded out? I've tried using javascript and autoplay, but it doesn't seem to work without controls enabled. Any suggestions? Check out the HTML code below: ...

jqueryhtmlvideohtml5-video

Observing a web page created by a Java Servlet

After receiving the provided code, I attempted to compile it using a customized version of Dr. Java. However, upon attempting to run the code, I encountered an error message stating: "Static Error: This class does not have a static void main method accepti ...

javahtml

What is the process for incorporating a full-page blog into a blog preview?

I customized a template, but there is a blog section within the div that I am struggling to replicate. Here is the test website for reference: Below is the HTML code for the blog section: <!-- Blog Start --> <section class="section bg ...

javascriptphphtmlcss