When converting a block formatting context into a block, the margin does not collapse

It seems that the behavior of margins collapsing between block elements inside and outside a BFC is not as straightforward as expected. For instance, when a button element's display property is set to inline-block, it forms a BFC, which should prevent margin collapsing.

However, if we were to change the display type of the BFC to 'block', theoretically the margins should collapse. But in reality, this does not seem to be the case based on the provided code snippet.

Check out the Fiddle

HTML

<div class="no-collapse">
  <h2> MARGIN <u>DO NOT</u> COLLAPSE</h2>
  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Magnam perspiciatis libero hic perferendis pariatur minus, officia fugiat id doloremque cum. Esse id, molestiae. Nihil similique libero deserunt, facilis fuga totam.</p>
  <button>
    <h2>BUTTON TURNED INTO BLOCK</h2> This is a button turned into regular block
    </button>
</div>

<div class="collapse">
  <h2> MARGIN COLLAPSES</h2>
  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Magnam perspiciatis libero hic perferendis pariatur minus, officia fugiat id doloremque cum. Esse id, molestiae. Nihil similique libero deserunt, facilis fuga totam.</p>
  <p>Reguarl paragraph block</p>
</div>

CSS

div.no-collapse {
  background-color: antiquewhite; 
  border: 1px dotted black}

div.collapse { background-color: aqua;}
button {
  display: block;
  border: 0;
  padding-top: 0;
  padding: 0;
}

p { background-color: #ccc; }

Would anyone care to share their insights on why turning a BFC into a block element does not result in margin collapsing?

Answer №1

According to CSS 2.2 section 3.2, the specification does not clearly define which properties can be applied to form controls and frames, nor how CSS can be used to style them. User agents have the discretion to apply CSS properties to these elements.

This lack of clear guidelines especially affects buttons, where there is no standardized behavior. So even though applying display:block to a button element may have some impact, it does not automatically transform the button into a block-level box like setting it on a span element would. Additionally, this change does not alter how the content within the button is displayed, nor does it prevent the button from being a Block Formatting Context (BFC) for its contents.

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

Z-order for ClockPicker

Within my application, I've implemented a pop-up for inputting event data. One of the fields within this pop-up is for setting the time using the DateTimePicker from MUI. <Popup width={600} height={600} ...

The parent div isn't properly extending to accommodate the table, and the columns aren't aligning correctly within the table when using CSS flexbox

I have a scenario where I need a table inside a div to take up the entire space of the div, with the second column and its inputs expanding as much as possible to fill the width (i.e. col1+col2 = div width). Due to being nested within another div, absolut ...

Should the <head> tag in an HTML document contain a substantial amount of content?

Is there a difference in performance if we have a large amount of content in our HTML document? I believe it shouldn't make much of a difference, right? My plan is to load all text content on a single page and then use JavaScript to display the relev ...

What is the best way to retrieve the value of a submitted button in a jQuery form submission?

I am facing an issue with my HTML code. Here is the structure: <form method="post" id="IssueForm" action="wh_sir_insert.php"> <input name='id[]' type='checkbox' class="selectable" value='$col[8]' /> <inpu ...

Collapsible Span with Maximum Width in Unique Twitter Bootstrap

UPDATED If I assign a max-width value to the .container element, it disrupts the alignment of my spans. <div class="container" style="max-width:940px"> <div class="row"> <div class="span4" style="background-color:#F00">1</div& ...

The like button animation works perfectly for individual posts, but for multiple posts, only the like button on the first post

Having an issue with the like button code on a single news feed. The button works for the first post, but when clicking on other posts, it only affects the first post button. I am using post UI and looping the UI based on the total post count without Javas ...

Enhancing functionality through interactive buttons: optimizing the performance of this dynamic data code

I am seeking a more efficient way to retrieve names from a database using PHP and MySQL. Currently, I have multiple if isset statements in my code, one for each button that retrieves a specific name. Is there a better approach to achieve the same result ...

How to align a button vertically centered next to a matInput using Angular Material

Is there a way to vertically center a button next to matInput in Angular material? The submit button appears too low compared to the "First Name" input field, as shown in the images below: Your response can be provided by forking my stackblitz project her ...

Include the array in the 'content' property of the CSS using Jquery

I need help formatting data in CSS. The code I have is as follows: if (ext){ switch (ext.toLowerCase()) { case 'doc': pos = 'doc'; break; case 'bmp': pos = 'bmp'; break; ...

Create a layout using CSS that features two columns. The left column should be fluid, expanding to fill all remaining space, while the right column should be fixed

I need to ensure that the Online Users div always remains at a fixed size of 200px, while allowing the chat window next to it to resize dynamically based on available space. Essentially, I want the chat window to adjust its width as the window is resized, ...

Assigning numerical ratings to a web-based questionnaire in HTML

In my questionnaire, I have radio buttons and checkboxes that need to be graded. The format of the input elements looks like this: <input type="radio" name="1" value="Yes" onclick="document.getElementById('pls').setAttribute('requi ...

Change the dropdown header behavior from hovering over it to clicking on it

This snippet of code is integrated into our header to showcase the cart. Currently, the dropdown appears when hovering over it. Is there a way to adjust this so that the dropdown shows up when onclick? <a href="#header-cart" class="skip-link skip-cart ...

What happens when the overflow-hidden property is overlooked due to a child element being assigned absolute positioning?

When does overflow hidden not work as expected? If a child element overflows and has absolute positioning If the parent with overflow hidden is statically positioned When a second parent wrapper with relative positioning is added Why does this happen eve ...

Tips for dynamically loading a modal

Hello, I am curious about dynamically loading modals on different images within my current webpage. For example, when the life of Pi image is clicked, a modal pops up displaying relevant information. I would like this functionality to extend to other ima ...

Tips for ensuring consistent display of UTF-8 arrow characters across different web browsers

Is there a way to ensure consistent display of UTF-8 arrow characters across all browsers? I have experimented with various font sizes like px and pt, as well as using HTML Entity codes (e.g. &#9664;) but unfortunately the arrows still show difference ...

Tips for Creating a CSS Radio Button in ASP.NET

I've recently developed a web application using asp.net and I'm facing an issue while trying to style the radio buttons using CSS like the example below: https://i.sstatic.net/k7qGB.jpg However, after applying this design, the radio buttons are ...

The validation requirement in Angular prevents the form from being considered valid until the input has been modified

I have included the HTML5 required property in the below HTML code: <div class="col-sm-3"> <label>{{question.placeholder}}<span *ngIf="question.required">*</span></label> </div> <d ...

How do I dynamically incorporate Tinymce 4.x into a textarea?

I am encountering a small issue when trying to dynamically add tinymce to a textarea after initialization. tinymce.init({ selector: "textarea", theme: "modern", height: 100, plugins: [ "advlist autolink image lists charmap print p ...

Increase the spacing between the scrollbar and the border

Looking to create some breathing room between the scrollbar and the right border of my text area. I've tried adjusting the margin-right/left values in -webkit-scrollbar with no success. Here's my style component: const FormTextArea = styled.texta ...

Displaying Title and Description Dynamically on Markers in Angular Google Maps

I am currently utilizing Angular-google-maps, and here is the HTML code snippet: <ui-gmap-google-map center='mapData.map.center' zoom='mapData.map.zoom' events="mapEvents"> <ui-gmap-markers models="mapData.map.markers ...