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

Select the five previous siblings in reverse order using jQuery's slice method

I have a unique approach to displaying a series of divs where only 5 are shown at a time using the slice() method. To navigate through the items, I include an ellipsis (...) link after every 4th item, which allows users to easily move on to the next set of ...

javascriptjqueryhtmlcssangularjs

What is the best way to ensure all my borders are uniform in size?

As I work on a JavaScript project that organizes words into blocks based on their size, I encountered an issue with inconsistent border thickness in certain areas. I'm using spans to contain each word, but I can't figure out how to make the borde ...

javascripthtmlcss

How to dynamically display a div in Vue.js depending on the attributes of another element

I have a dilemma with my text container. My goal is to collapse the div if the text length exceeds a certain limit, and then display a button that says "...show more". When this button is clicked, the div should expand. Clicking it again should collapse th ...

javascripthtmlcssvue.js

Get rid of the arrow that is displayed when using the `time` input type in HTML5

Recently, I encountered an issue with the default HTML5 code snippet. My custom background looked perfect except for a pesky black arrow appearing on the right side. In this image, you can see the problematic black arrow that needs to be removed. I attemp ...

javascriptcsshtmlinputtime

Solving the Cross-Origin Resource Sharing problem in AngularJS

While using the http dependency in AngularJS and setting headers for CORS, I am encountering an error. Please check the console.log for more information on the error. The error message reads: "XMLHttpRequest cannot load . Response to preflight request doe ...

javascripthtmlangularjshttpcors

Conceal content after a specific duration and display an alternative in its position, continuously repeating the loop

Imagine creating a captivating performance that unfolds right before your eyes. Picture this: as soon as the page loads, the initial text gracefully fades away after just three seconds. In its place, a mesmerizing animation reveals the second text, which ...

javascriptjquerycsshtml

A guide on restricting overflow in React Spring Parallax 'pages'

Currently, I have integrated React Spring Parallax () into my project found at this link: https://codesandbox.io/s/parallax-sticky-scroll-2zd58?file=/src/App.js Upon clicking the button to navigate to the next section, it is noticeable that the image over ...

cssreactjsparallaxreact-spring

Sending jQuery variables to PHP

Is it possible to transfer a jQuery variable to a php file? Let's take a look at the code in my_js.js: function updates() { $.getJSON("php/fetch.php", function(data) { $.each(data.result, function(){ var s_id = this[& ...

phpjqueryhtml

Previewing a PDF file with multiple headers displayed above the text content

Creating multiple headers for each page of a PDF document using dompdf can be tricky. The headers you generated are fixed at the top with a width of 100%. However, you are facing an issue where on the second and subsequent pages, the header overlaps with t ...

phphtmlcsspdfdompdf

Center align the mat-expansion-panel material component in a vertical orientation

When working with the mat-expansion-panel component alongside a mat-accordion, I've encountered an issue where the items are not aligning vertically at the center/middle. I'm unsure of the proper method to achieve vertical alignment for the conte ...

htmlcssangularangular-material

Struggling to resolve problem with MoveTargetOutOfBoundsException or encountering difficulty scrolling into view in Firefox

Despite trying numerous options, I've hit a roadblock in Firefox where my code can't seem to locate an element that is clearly visible on the screen. Below is a snippet of my code including variable declarations: ''' *** Variables ...

htmlpython-3.xseleniumpycharmrobotframework

Choose an input that is not grouped with the rest

I am facing an issue where I need to group these three inputs together as one continuous form. However, there seems to be a problem with the select input not aligning correctly with the rest of the form. Is there something that I might be doing wrong? & ...

htmlcsstwitter-bootstrap

Having an issue with my JavaScript burger menu not functioning properly

I'm really struggling to figure out why my code isn't working. I've checked and rechecked all the links, and everything seems correct. Could it possibly be because the code is outdated? I've been stuck on this for two days now and can&a ...

javascripthtmlcssnavigation

Struggling to resolve a glitch in the mobile navigation that requires attention either through JavaScript or CSS coding

I'm having an issue with a mobile navigation menu I created. It's a simple hamburger icon that, when clicked, opens a fullscreen menu. The problem is that I want to prevent scrolling when the overlay is visible. I tried using this code: $(' ...

jquerycssmobilescrollnav

Ways to emphasize the four edges of a table cell using border-collapse collapse

I am trying to emphasize the borders of cells with the class active. The challenge arises from the fact that the table's border-collapse property is set to collapse, causing the top and left borders of cells (except for the leftmost and top row cells ...

htmlcsshtml-table

Strategies for optimizing progressive enhancement

Designing a website that is accessible to everyone is truly an art form, and Progressive Enhancement is something I hold dear... I am curious to hear about the best techniques you have used to ensure websites work for all users, regardless of their browse ...

javascripthtmlprogressive-enhancement

Is it possible to reset the text within the text box when the form is being submitted using the load() ajax function?

I am working on implementing a comment feature where the data entered in the form is appended and displayed after submission. Here is my HTML form: <table> <tr><td>Name :</td><td> <input type="text" id="name"/></td&g ...

javascriptphphtmlajaxforms

Button failing to align properly in the center position

I was able to successfully create a responsive input box, but for some reason, the button is not aligned in the center. Below is the CSS code: .webdesigntuts-workshop button { background: linear-gradient(#333, #222); border: 1px solid #444; border- ...

htmlcss

Gradually alter the content within the div while transitioning the background color

I'm working with a div that has the following CSS properties: #results { background: #dddada; color: 000000; cursor: pointer; } #results:hover { background: #3d91b8; color: #ffffff; } How can I smoothly change just the text inside this div, u ...

jqueryhtmlcallbackfadeinfadeout

Enhance ngx-bootstrap's tab content with ngx-scrollbar functionality

Currently in my project, I am utilizing bootstrap 4 and ngx-bootstrap. One requirement I have is to develop a component consisting of 2 scrollable divs that can be switched by tabs. I was hoping to demonstrate a sample application on stackblitz, but unfor ...

cssangulartwitter-bootstrapflexboxngx-bootstrap