Shifting of margins occurs as the child element's border is eliminated and moves to the parent

After removing the border of the footer tag, the margin-top property of the <div id="foot"> is applied to the footer tag instead.

Below is the code being used:

footer {
    background: #0096D6;
    width: 100%;
    height: 250px;  
    color: #fff;
    border: #FF0004 1px solid;  
}
#foot {
    width: 1136px;
    margin: 0 auto;
    margin-top: 80px;   

}

<footer>
<div id="foot">
    <div id="subscribe">
    <b>Subscribe</b><br><br>Get the latest news, events, updates and offers from the team and people working in DigitNomics.<br><br><input type="email" name="email" id="email" placeholder="<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="90e9ffe5e2fef1fdf5d0f4fffdf1f9febef3fffd">[email protected]</a>" />
    </div>
    <span id="development">
        <ul>
            Current Development
            <a href="#"><li>Demo</li></a>
            <a href="#"><li>ALPHA Development</li></a>
            <a href="#"><li>BETA Development</li></a>
        </ul>
    </span>    
</div>
</footer>

View the fiddle with border here: https://jsfiddle.net/dkp5k1yq/ When the border is present, the margin-top works as expected. And this is the second fiddle without the border on the footer: https://jsfiddle.net/dkp5k1yq/1/

I prefer not to have a border on the footer tag, but when removed, its child's margin property gets transferred to it.

htmlcss

Answer №1

For more information on Margin Collapsing, you can check out MDN's resource. Here is a summary of the concept:

Parent and first/last child

When there are no elements like border, padding, inline content, or clearance to separate the margin-top of a block from its first child block, or no elements like border, padding, inline content, height, min-height, or max-height to separate the margin-bottom of a block from its last child, then those margins collapse. This results in the collapsed margin being positioned outside the parent element.

In your first example provided in this JSFiddle link, the parent element footer had a border, preventing the margins from collapsing.

However, in your second example shared in this JSFiddle link, the parent element footer did not have any elements like border, padding, inline content, or clearance, which caused the margins to collapse.

If you encounter this issue, one solution could be modifying the CSS code as follows:

#foot {
  padding-top: 80px;   
}

Answer №2

An easy solution is to simply include display: inline-block in the styling for either #foot or footer element.

Answer №3

Create a new class called clearfix in your CSS file and then add it to the footer tag.

    .clearfix:before, .clearfix:after {
    content: "";
    display: table;
}

.clearfix:after {
    clear: both;
}

.clearfix {
    *zoom: 1;
}

HTML

<footer class="clearfix">

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

Creating a form using Flexbox and responsive design

Looking to implement a responsive login form using Flexbox and achieve a design similar to the mockup images. How can I accomplish this? .wrapper { display: flex; flex-flow: row wrap; text-align: center; background: linear-gradient(to bo ...

htmlcssflexbox

What is the best way to retrieve the previously chosen item from an array?

I have successfully implemented dynamic pill tabs with one minor issue remaining. The most crucial aspect is that when I remove a pill, I want it to return to the previously opened tab. I have provided a StackBlitz example without routes on this page: -> ...

javascripthtmlcssangularangular-material

Is there a way to identify the specific list item that a draggable element has been dropped onto within a jQuery sortable with connected draggable lists?

Take a look at these two sets of items: user's inventory <ul id='list1'> <li>Apple</li> <li>Banana</li> </ul>available products <ul id='list2'> <li>Orange</li> ...

javascriptjqueryhtmljquery-ui

Has anybody dabbled with Indexed DB before?

After finding out that WebSQL is deprecated, I started exploring IndexedDB as an option for browser offline storage. However, I discovered that IndexedDB has undergone significant design changes since the examples provided in HTML5Rocks (http://www.html5 ...

htmloffline-cachingindexeddboffline-browsing

Display the onclick event of multiple buttons on a web page

I am currently working on extracting the "onclick" attribute (onclick="openDirection( 41.051777,28.986551)") from the first button element within each li element. My goal is to display all of the coordinates. In the provided code snippet, I have been abl ...

pythonhtmlseleniumcss-selectors

Displaying postcode on a category page: A step-by-step guide

I would like to showcase the user input code and present it on the web exactly as entered. <?php #code... ?> Any assistance is greatly appreciated. Please excuse my English. Thank you! ...

javascriptphphtmlcss

Extending an element beyond the boundaries of its container

I currently have 3 different divisions within the body of my document: a container, a parent, and a child element. My goal is to make the child element extend beyond its parent on the left side. However, when I try to achieve this by using position: ab ...

csscss-position

Understanding the distinction between assigning a value and setting text through JSE in Selenium using C#

Utilizing the IJavaScriptExecutor to set the attribute value can sometimes result in the text box containing the set value, but not displaying it as text. In some cases, the input is sent normally to certain text boxes, while for others, it is only setting ...

javascripthtmlseleniumselenium-chromedriver

Poorly structured Vue HTML code

Currently, I am embarking on my journey with Vue and have set up ESLint and Prettier to format the code according to my preferred style. However, it is not behaving as expected. Specifically, when attempting to display a variable in the template, the forma ...

htmlvue.jsvue-componentprettier

The PHP file I'm trying to access isn't receiving the GET request from my PHP script

Basically, I want a button on one php page to trigger the printing of a new php page. This feature is working perfectly. The only issue is that I am trying to ensure the user ID gets passed over to the second page and displayed there. Strangely, it seems t ...

phphtmlget

The date retrieved from the MySQL database is failing to show up properly in an HTML table even after applying the date_format

I am struggling with a piece of HTML code that retrieves data from a database and displays it in an HTML table. The problem is, everything shows up except for the date field. Oddly enough, when I execute the query in the MySQL command line, the date displa ...

phphtmlmysql

Create numerous collapsible elements using the ui.bootstrap and AngularJS frameworks

Currently, I am working on implementing the ui bootstrap collapse feature. The static single or double collapse system works perfectly fine, but for my specific design requirements, I need to create collapses using ng-repeat. Unfortunately, I am unsure how ...

javascriptjqueryhtmlangularjsangular-ui-bootstrap

How can I create a layout with cards that are arranged differently on wide screens compared to mobile using bootstrap?

Having trouble with my bootstrap 5.x layout. Can anyone help me achieve a design where the cards display like the left image on desktop/wide screens and like the right image on smaller width mobile screens? I currently have the mobile view showing A-B-C-D- ...

csstwitter-bootstrapbootstrap-5

Looking to retrieve HTML elements based on their inner text with queryselectors?

I am looking to extract all the HTML divs that contain specific HTML elements with innerText = ' * ' and save them in an array using Typescript. If I come across a span element with the innerText= ' * ', I want to add the parent div to ...

javascripthtmltypescriptqueryselector

Enhancing PHP Markdown to Support Custom CSS Classes

Markdown is a tool I use frequently in my PHP projects, but sometimes I find its output to be too simplistic. I wish I had more control over the layout and design of my content. For example, when inserting an image: <p> <img src="path/to/image. ...

phpcssmarkdown

The side modal features a full-height design with headers, bodies, and footers that are

I have created a side modal that extends to full height. The content in the modal body is quite lengthy, but I am facing an issue where the header, body, and footer are not equal in size. I am considering using scrollspy on the HTML body tag to potentially ...

cssmodal-dialogbootstrap-4bootstrap-modal

Using jquery for creating a dynamic tree menu

Looking to add a tree menu for this example. Initially all sections should be collapsed. Upon clicking on "Facility," the Buildings should expand in a tree-like format, and further clicks on XYZ building should reveal the Floors. Something along those line ...

javascriptjqueryhtmlcss

The appearance of web viewing differs from that of mobile browsing

While developing, I am using the Chrome engine. Everything looks good on the web version, but when viewed on an actual device with Chrome or other browsers like Firefox, it appears differently. Check out this image showcasing the behavior: https://gyazo.c ...

htmlcssmobileflexbox

What is the computed value of HTML and body?

Is there a specific reason why the body tag has a default margin while HTML does not? Could there be any practical explanation for this design choice? ...

htmlcss

Accessing the facebox feature within a dropdown menu

Looking for assistance in creating a function to open a facebox when an option from a drop down list is selected. Here is what I have so far: <select><option value="www.google.com/" id="xxx"></option></select> In the header sectio ...

javascriptjqueryhtmlfacebox