Why are my div elements mysteriously adding bottom margin?

I've encountered an unexpected margin bottom issue while working on some HTML and Bootstrap code. No matter how I try to set the div margin to 0 in a separate stylesheet, like this:

body {
  margin: 0;
}

div {
  margin-bottom: 0;
}

The problem persists. Do any of you know why this is happening?

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="81e3eeeef5f2f5f3e0f1c1b4afb3afb2">[email protected]</a>/dist/css/bootstrap.min.css" integrity="sha384-rbsA2VBKQhggwzxH7pPCaAqO46MgnOM80zW1RWuH61DGLwZJEdK2Kadq2F9CUG65" crossorigin="anonymous">

<div id="sup" class="bg-danger p-4 h1">
  Title
</div>
<div class="bg-dark">
  <ul class="d-flex flex-row justify-content-end list-unstyled">
    <li class="m-3 p-3 bg-light">
      Home
    </li>
    <li class="m-3 p-3 bg-light">
      About
    </li>
    <li class="m-3 p-3 bg-light">
      Products
    </li>
  </ul>
</div>
<div class="bg-warning p-5 h1 d-flex justify-content-between">
  <div class="m-4">
    it will content image
  </div>
  <div class="card m-4" style="width: 18rem;">
    <div class="card-body">
      <h5 class="card-title">Contact us</h5>
      <p class="card-text h6"></p>
      <p class="card-text h6">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
      <a href="#" class="btn btn-primary">Contact Now</a>
    </div>
  </div>
</div>

htmlcssbootstrap-5

Answer №1

It seems like you're including the h1 class on your container divs, resulting in unnecessary bottom margin. This is an unconventional use of heading classes, which are typically meant for headings and text elements. Consider using a heading element instead for better semantic structure, and apply the class there if needed.

If you do find it necessary to add typography classes to the divs, Bootstrap provides convenient spacing classes like m-0 or mb-0 that can help remove excess margin without requiring custom CSS. Familiarize yourself with these utility classes to streamline your workflow and avoid unnecessary customization.

You can easily identify such issues by inspecting your document with the browser's developer tools. This skill can be quite beneficial in troubleshooting layout problems quickly and efficiently.

To eliminate the gap below the menu, consider applying m-0 directly to the list element to reset its default margin settings.

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

Several buttons converging towards a single circle

https://i.sstatic.net/NyHXu.png I attempted to create a circular layout using 6 buttons, but the end result did not form a perfect circle as intended. In the image provided, I highlighted the areas of concern in red. Below, you will find my HTML and CSS c ...

htmlcsstizen

What is the proper method for utilizing colspan within the footerData of a jqGrid?

Are you looking to customize the footer of your jqgrid as shown in the example below? I am trying to set up a custom footer for my jqgrid similar to the one displayed above. I have already enabled the footerrow:true option and used $self.jqGrid("footerDat ...

javascripthtmlcssjqgrid

Code an AJAX login form using PHP, HTML, CSS, jQuery, and MySQL

I'm struggling with the login functionality on my website. Despite entering correct details, users are unable to log in using their name and email ID. As a beginner in using Ajax, I need guidance on how to troubleshoot this issue. What steps should I ...

phphtmlajaxmysqli

Having Trouble Receiving Desired Results with Ajax and JSONP

Testing jsonp for a new project. The html page features ajax, displaying a drop-down form and an empty table. The table cells will be populated based on the jsonp response fetched by ajax. The php response is hosted separately but doesn't seem to wo ...

phpjqueryhtmlajaxjson

Attempting to retrieve the current time using JavaSscript

const currentTime = new Date(); const hours = now.getHours(); Console.log(hours); This block of code is returning an error message... Uncaught ReferenceError: now is not defined Please note that this snippet is written in JavaScript. I attempted to us ...

javascripthtmlnode.jsjsondynamics-al

Bootstrap Modal for WooCommerce

I'm facing an issue while trying to create a modal window using woocommerce variables ($product). The problem lies in the placement of my modal and accessing the correct product id. Here is the code snippet I've been working on. Unfortunately, i ...

javascriptcsswordpresstwitter-bootstrap

The watermark feature in HTML may not appear when printed on every page

I'm facing an issue with adding a watermark style. The watermark displays only on the first page when attempting to print in Chrome. It works perfectly in Firefox and IE. <style type="text/css"> #watermark { color: #d0d0d0; font-size: 90pt; ...

javascripthtmlcss

Place a pair of divs in the center next to one another

What is the best way to align two divs in the center beside each other with some padding in between that actually works? I attempted using display: inline, but it didn't have the desired effect. .my-container { position: rela ...

htmlcss

Every time I hover, my jQuery code keeps repeating the hover effect

I am currently facing an issue that has me stumped on finding a solution. The problem arises when I hover over the .div multiple times, the animation just doesn't stop and keeps running continuously. What I aim for is to have the .hidden element fad ...

javascriptjqueryhtmlcss

How to place a button in SwiperJs using React

Can anyone provide guidance on how to position the navigation buttons in a manner similar to the image below? The desired layout is for the buttons to appear on the outer edges of the swiper component. You can refer to this demo for more information. htt ...

cssreactjstailwind-cssswiper.js

Creating a customized icon scheduling feature with CSS

Creating an icon using CSS that looks like the one below seems to be quite challenging. I attempted to achieve it with this approach, but the result was not satisfactory. https://i.stack.imgur.com/5W7Hj.png .schedule { height: 10px; width ...

htmlcss

Is there a method to identify the quantity of audio channels within a <video> element? (HTML5)

I would like to connect an AnalyserNode to each audio channel of a video element in order to perform audio visualization. Currently, my code is functioning properly except for the fact that both AudioContext and MediaElementAudioSourceNode consistently re ...

htmlaudiovideohtml5-video

Placing elements in an exact position within a parent container is causing an overlap with the

I am struggling to grasp why a div set as absolute inside a relative div is overlapping with other elements. From what I understand, it should remain fixed within its parent relative div, right? This is my solution: #container { position: relative; ...

css

Establish a variable in XSL to define the tabIndex

My XSL code has been designed to read an XML file and generate input elements of type text for each child node. The XML file structure is as follows: For node c, two input boxes are created in the format: Label(com 1) :input box--------------------- Label ...

javascripthtmlxslt-1.0

Table that has a border before the first row but no border after the last row

I recently upgraded my project from Bootstrap 4 to 5 and noticed a change in the display of tables. In Bootstrap 5, borders are no longer drawn above the first row (without a header), but below the last row. Is there an easy way to revert to the old behav ...

bootstrap-5

Using PHP to create an HTML table that can have variable rows and columns, with the data in each row depending on

My latest project involves an assessment system that evaluates each student's performance in every lesson. I have a form set up to generate a table with the following headers: Student name Student ID Lesson title Lesson ID Lesson grade In order to ...

phphtmlmysql

The current issue with this javascript function is that it is failing to produce any output

function calculateOverallCGPA() { let cumulativeGPA = 0.00; for (let i = 1; i <= semNum; i++) { const GPAforOneSubject = parseFloat(getElementById(`subs${i}`).value); cumulativeGPA += GPAforOneSubject; } const finalCGPA = ...

javascripthtmlfunction

Exploring the power of Google Charts in conjunction with PHP arrays

I have three PHP arrays with key-value pairs: $needles = ["Needle1", "Needle2", "Needle3", "Needle4", "Needle5"]; $uph1 = ["Needle1" => 3, "Needle3" => 5, "Needle4" => 7]; $uph2 = ["Needle1" => 4, "Needle2" => 2, "Needle3" => 4]; ...

javascriptphphtmlgoogle-visualization

The backdrop moving in a reverse direction

I recently made a tweak to this code that successfully moves the background in the opposite direction of the scroll. However, there is now an issue where it leaves a blank space at the top, even when the background is set to repeat. The change I made was s ...

javascriptcss

css: Positioning divs relative to their parent div

In my design, I want the blue div to be positioned next to the red div without affecting the yellow div's placement. http://jsfiddle.net/pCGxe/ Is there a cleaner way to achieve this layout without resorting to using position:absolute or other trick ...

csslayout