I've been diving into the W3C specifications and there's one part that's really puzzling to me: this specific section.
When the top and bottom margins of an element with clearance are adjacent, they collapse with the margins of following siblings. However, this resulting margin does not collapse with the bottom margin of the parent block.
Can anyone provide a simple explanation or perhaps demonstrate it on JSFiddle for me?
Ah, indeed! Check out the snippet provided below [JSfiddle] on either Firefox or IE.¹
.case { width:200px; background-color:yellow; }
.container { background-color:lightblue; margin-bottom:70px; padding-top:0.01px; }
.preface { float:left; height: 58px; width: 100px; border: 1px solid red; }
.one .intro { clear: left; margin-top:60px; }
.two .intro { clear: left; margin-top:59px; }<div class="case one">
<div class="container">
<div class="preface">
lorem ipsum
</div>
<div class="intro"></div>
</div>
after
</div>
<hr>
<div class="case two">
<div class="container">
<div class="preface">
lorem ipsum
</div>
<div class="intro"></div>
</div>
after
</div>(The scenarios are almost identical except for the class name "one" or "two" and their specific CSS styles. The padding-top:0.01px; prevents the margins from collapsing between elements)
When an element's box moves down due to a specified clear value, it is said to have clearance. This can be seen in case two. In contrast, in case one, although the box has clear:left, its top margin is sizable enough that no clearance is needed.
Take a look at the outcome.
In case one, the 70px bottom margin of the container collapses with the top-margin of the .intro div, resulting in a 70px space between the .container div and the text "after". Conversely, in case two, due to the presence of clearance in the .intro div, as per the CSS specifications, the bottom margin of the container does not collapse with the top margin of the .intro div. Thus, the top-margin is applied first, followed by the container's bottom margin, creating distinct background areas.
¹Regrettably, Chrome does not handle this situation correctly.
I'm currently facing an issue with creating a responsive webpage layout. My goal is to have a fixed left column that consists of an image taking up 66% of the page, with the remaining 33% dedicated to scrollable content on the right side. To achieve t ...
Seeking to style all child elements like div, table, ul, dl, under a specific selector using LESS. It would be great if I could do something along these lines. .myclass { ... &.otherClass > (div, ul, dl, table) { // define some rules... ...
After spending 48 hours immersed in the world of clip, clip-path, masking, and all things CSS-related, I find myself unable to crack the code on the following challenge: Imagine a red background filling the body of the page. Layered on top of this is a wh ...
I am in need of a single EJS file (configuration includes Express and Request). app.get('/space', function(req, res){ res.render('space.ejs'); }); The file successfully renders, but only two out of three CSS stylesheet links work ...
I am attempting to create an animation where a div's width expands while causing the div to the left of it to shrink and disappear. Here is my progress so far: link The challenge I'm facing is getting the width of the first (left) div to actual ...
I've encountered an issue on small devices with the Bootstrap card. I'm using a hover effect to slide up the content, but on small devices, the content is cutting off the image. I'm not sure how to position the content directly after the ima ...
Is it possible to use the same id attribute value in multiple posts on a Blogger platform? For example: Blogger post 1 <div class="panel-heading" id="myPost">some content</div> Blogger post 2 <div class="panel-h ...
Currently experimenting with Bootstrap 4 beta through the CDN, I have encountered a peculiar issue with the newly introduced d-* class. Upon trying out a simple div with the class "d-none d-lg-block", it performed as expected, being visible only when the ...
Below are the CSS styles I am currently using: import styled, { css } from "styled-components"; const H4 = css` font-family: "Futura"; font-style: normal; font-weight: 500; font-size: 20px; line-height: 140%; color: #3a786a ...
I've attempted to use FindElementByName but I keep getting a no such element error when it should recognize this name. What am I overlooking? This issue is occurring on the website Intacct.com. Despite my efforts, I have been unable to find a unique C ...
I'm having trouble positioning a delete button in the top right corner of a collapsible box. Despite setting it to `visibility: visible`, I can't seem to get it to display at the top of the collapsible element. Any suggestions or ideas would be g ...
Hey everyone, I could use some assistance. I'm trying to execute multiple events with a single click. Currently, I can change the image in my gallery on click, but I also want to add text labels corresponding to each image. Whenever I click on a diffe ...
I want to design a grid that covers the whole screen with 3 columns (left, middle, right) Left: This column should only be displayed on large views and occupy 16.6% of the screen (2/12) Middle: This column should always be visible. It should take up 75% ...
dl { width: 480px; } dt { float: left; clear: right; width: 100%; background: url(http://galeon.sourceforge.net/twiki/pub/TWiki/TWikiDocGraphics/dot_lr.gif) repeat-x 0 180%; } dt span { background: #fff; ...
Recently, I developed a JSP page within the webapp that utilizes jquery, CSS, and Angular JS. The files jquery-1.12.0.js, angular.min.js, and TableCSSCode.css are all located in the same directory as the JSP page. Initially, my application context was set ...
Does anyone know how to create a card view using Bootstrap in HTML and CSS? https://i.sstatic.net/3hIsf.png I've been trying to replicate the image above with no success. Here is the code I have so far: <link href="https://stackpath.bootstrap ...
Over on this particular page, an embedded YouTube video takes up the left side of the screen while a carousel labeled "Similar Festivals" sits adjacent. The code snippet used to embed the YouTube video looks something like this: This is how the YouTube se ...
As a beginner in Javascript, I recently encountered an issue with a UI tab element that contains two tabs. My goal is to create a button that, when clicked, will scroll up and activate the second tab. <style> .tab-container { overflow-x: ...
I'm currently working on a dynamic sidebar in vuejs and I need some assistance. The issue I'm facing is that I want the submenu to remain open when hovering over either the parent menu or the submenu itself. However, when I move the mouse away fr ...
I'm currently facing an issue with changing the background color of my nav-bar dropdown to black, as well as adjusting the width of the dropdown options to fit the screen. Despite trying the code provided below, I am unable to change the dropdown bac ...