Is it necessary for two sibling elements to be of the same type in order for their margins to collapse together?

I am currently working on enhancing the visual appearance of a Bootstrap 4 card and encountered an issue:

https://i.stack.imgur.com/p8Qzhm.png

The spacing between the About the gig heading and the top Date item appears to be uneven. I would like to make this spacing consistent. Upon further inspection, I noticed that margins do not collapse as expected.

This is evident in the h3 element with About the gig, which has a bottom margin of 16px:

https://i.stack.imgur.com/BIMHY.png

In contrast, the following element with the Date has a top margin of 24px:

https://i.stack.imgur.com/ULQes.png

The total spacing between the About the gig and Date elements calculates to be 24px + 16px = 40px, whereas margin collapsing should result in max(16px, 24px) = 24px.

According to the explanation on https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Box_Model/Mastering_margin_collapsing, margin collapsing occurs for "adjacent siblings." The provided examples feature elements of the same type (e.g., two p elements). Do elements need to be of the same type to be considered "adjacent siblings"? What could be causing the lack of margin collapsing in this specific scenario?

htmlcssmargin

Answer №1

To eliminate the 16px margin on the top h3, you have the option to apply an mb-0 class. This default CSS rule is part of Bootstrap framework. My suggestion would be to retain this margin and only remove it when necessary.

In my case, this setting can be found in _type.scss file, but it might be located elsewhere for your specific project.

Answer №2

To eliminate the bottom margin on an h3 element, simply add the class "mb-0" to it.

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

Is it possible to include numbers and commas in JQuery Validation?

I have implemented a jQuery validation plugin to validate the fields of a form. One specific requirement is to validate a field to only allow commas and numbers. Below is the HTML code snippet: <input type="text" placeholder="Number of Employees" requ ...

javascriptjqueryhtmlvalidation

Is it possible for an HTML number input's arrows to change in increments that are different from its designated step attribute?

Within my design, I have implemented an <input type="number" step="1"> element for selecting font size. However, in the context of working on a large canvas, adjusting the number by 1 is hardly noticeable. It would greatly enhance ...

javascripthtmlinputuser-experience

JavaScript code does not run when a page is being included

On my AngularJS-based page, I have included some additional HTML pages like this: <div data-ng-include src="includehtml"></div> Here is the JavaScript code: $scope.selectImage = function(id) {$scope.includehtml = id;} (I pass the HTML file ...

javascripthtmlangularjs

The convergence of lighttpd with AngularJS's html5 mode offers a powerful

My angularJS website is hosted on a lighttpd server, but the html5 mode encounters a 404 error when I refresh or use a direct link. On my local Apache server, everything works fine and there are no issues with the rewrite expression in the .htaccess file. ...

angularjshtmlurl-rewritinglighttpdmode

Effective Methods for Implementing CSS Variables within nth-child Selectors

Objective: To pass a variable successfully as a parameter to nth-child. The task is to make the third line turn green in the example provided. Dilemma: Currently, the parameter is being disregarded as a variable. Inquiry: Is achieving this possible? If s ...

css

Tips for presenting a label and its value on separate lines while also displaying additional nested label-value pairs:

I have a specific request in mind, But the result I am seeing is different, Here's the code snippet, I'm utilizing bulma framework but encountering some challenges... <section class="section"> <p>Please verify the details below a ...

htmlcssbulma

When text is inserted into an inline-block div, it causes the div to shift downwards in

Consider the following HTML code snippet: <div class="one"> Test </div> <div class="two"> </div> <div class="three"> </div> If we apply the following CSS styles: div { display:inline-block; height:30px; ...

htmlcss

React isn't updating the on-change value despite changes being made

In my React application, there is a file called EditTodos.js that is responsible for updating the to-do list. When I click on the "Edit" button, it triggers a pop-up modal component. import React, { useState } from "react"; import { Button, Modal } from " ...

javascripthtmlreactjsbootstrap-4

How to retrieve the value from an editable td within a table using Jquery

I am working with a dynamic table that looks like this: <table> <tbody> <tr> <td>1</td> <td contenteditable='true'>Value1</td> </tr> <tr> ...

javascriptjqueryhtmlhtml-table

Fixing the issue of a div exceeding the height of its parent div in Tailwindcss

One issue I'm encountering is with my card element, which has a fixed height of h-80 in Tailwind. Typically, I use this card within a grid. However, I recently added a div inside the card that is larger than its parent div, and I want it to scroll ve ...

javascripthtmlvue.jstailwind-css

Is it possible to conceal the contents of a details tag without using a summary tag?

I'm looking for a way to hide the details tag without the summary. In my code, the summary is only visible when a condition [isvisible == false] is met. However, even when the summary is not visible, the details keyword is still shown and I want to hi ...

javascripthtmlcssvue.jscss-selectors

Avoiding memory leaks and performance hiccups in canvas applications

Currently, I am utilizing a canvas to present a grid made up of interconnected dots (a common feature in many codepens and experiments), and everything functions smoothly. In order to make the canvas responsive, I encapsulated all my code generation within ...

jqueryhtmlcanvasmemory-leaks

Swap Text/Characters When Hovered Over

I'm looking to add a fun interactive element to my webpage where the letters in certain text rearrange when a user hovers over it. For instance, hovering over "WORK" would display "OWKR" instead. I have a feeling that some JavaScript is needed for thi ...

javascriptjqueryhtmlcss

What sets justify-content apart from align-items?

I'm really struggling to grasp the distinction between these two properties. After conducting some research, it appears that justify-content can handle... space-between and space-around, while align-items is capable of... stretch, baseline, initial, a ...

cssflexbox

How can we prevent a div from displaying if no image is pulled in using Custom Field? Looking for a solution in WordPress, PHP, and CSS

Here is the code snippet I am currently using: <div class="banner"> <?php if(get_post_meta($post->ID, 'banner', true)) : ?> <img src="<?php echo get_post_meta($post->ID, 'banner', true); ?>" /> <?php el ...

phphtmlif-statement

Positioning buttons and elements on top of a BootstrapVue Carousel slide: a handy guide

Can different elements be positioned on the BootstrapVue Carousel slide without restrictions, such as in any corner or position? I have attempted to accomplish this by nesting additional elements within <b-carousel-slide></b-carousel-slide> ...

csstwitter-bootstrapvue.jscarouselbootstrap-vue

Establish the lowest possible height for Angular Material Expansion Panel Content

Is there a way to specify a minimum height for the content of an Angular Material expansion panel when it is open? I have searched for examples on setting the expandedHeight and collapsedHeight for the header, but not for the content itself. The Angular Do ...

cssangularangular-material

Incorporating A Full-Fledged Office Word Editor Into My Web Application

In our web project, we are looking to integrate a feature that allows users to create, edit, and save their word documents for reporting purposes. While Microsoft Office offers an online option here, it seems limited to working within the Microsoft OneDriv ...

htmlms-wordms-officetext-editorrich-text-editor

The Nodejs express static directory is failing to serve certain files

Hello everyone, I'm currently working on a project using NodeJs, Express, and AngularJS. I've encountered an issue where my page is unable to locate certain JavaScript and CSS files in the public static folder, resulting in a 404 error. Strangely ...

javascriptcssangularjsnode.jsexpress

JavaScript: Developing an interactive Word Guessing Game

Here's some sample code: let ccdisplay = document.querySelector('.crrDisplay'); let incdisplay = document.querySelector('.incDisplay'); let guess = document.querySelector('#character'); let textForm = document.q ...

javascripthtmlloops