What is the reason for the gap between the bottom row and the one above it?

Using bootstrap to create a table and my code is as follows:

    <html>
        <head>
            <meta charset="UTF-8">
            <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
            <title>WebRTC Caller</title>
            <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css" integrity="sha384-9aIt2nRpC12Uk9gS9baDl411NQApFmC26EwAOH8WgZl5MYYxFfc+NcPb1dKGj7Sk" crossorigin="anonymous">
            <style>
                video{
                    transform: scale(-1, 1);
                    object-fit:cover;
                }
            </style>
            <script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
            <script src="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="c3b3acb3b3a6b1eda9b083f2edf2f5edf3">[email protected]</a>/dist/umd/popper.min.js" integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin="anonymous"></script>
            <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/js/bootstrap.min.js" integrity="sha384-OgVRvuATP1z7JjHLkuOU7Xw704+h835Lr+6QL9UvYjZE3Ipu6Tp75j7Bh/kR0JKI" crossorigin="anonymous"></script>
        </head>
        <body class="p-1">
            <div class="border-top border-primary container-fluid">
                <div class="row h-25">
                    <div class="col-6 border-left border-bottom border-primary">
                    </div>
                    <div class="col-6 border-left border-bottom border-right border-primary">
                    </div>
                </div>
                <div class="row h-25">
                    <div class="col-12 border-left border-bottom border-right border-primary">
                        dssdf
                    </div>
                </div>
                <div class="row h-25">
                    <div class="col-12 border-left border-bottom border-right border-primary overflow-auto h3">
                        fda
                    </div>
                </div>          
                <div class="row h-25">
                    <div class="col-12 border-left border-bottom border-right border-primary overflow-auto h3">
                        e
                    </div>
                </div>
            </div>
        </body>
    </html>

Facing an issue where space exists between the last row and the second last row in the table layout. Removing the h3 class from the last 2 rows solves the problem, but the class is needed for mobile readability. How can this spacing issue be resolved?

htmlcssbootstrap-4

Answer №1

The issue lies with the class .h3:

.h3{
   margin-bottom: .5rem;
}

To resolve this, you can use the override mb-0:

    <html>
        <head>
            <meta charset="UTF-8">
            <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
            <title>WebRTC Caller</title>
            <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css" integrity="sha384-9aIt2nRpC12Uk9gS9baDl411NQApFmC26EwAOH8WgZl5MYYxFfc+NcPb1dKGj7Sk" crossorigin="anonymous">
            <style>
                video{
                    transform: scale(-1, 1);
                    object-fit:cover;
                }
            </style>
            <script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
            <script src="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="31415e414154431f5b4271001f00071f01">[email protected]</a>/dist/umd/popper.min.js" integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin="anonymous"></script>
            <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/js/bootstrap.min.js" integrity="sha384-OgVRvuATP1z7JjHLkuOU7Xw704+h835Lr+6QL9UvYjZE3Ipu6Tp75j7Bh/kR0JKI" crossorigin="anonymous"></script>
        </head>
        <body class="p-1">
            <div class="border-top border-primary container-fluid">
                <div class="row h-25">
                    <div class="col-6 border-left border-bottom border-primary">
                    </div>
                    <div class="col-6 border-left border-bottom border-right border-primary">
                    </div>
                </div>
                <div class="row h-25">
                    <div class="col-12 border-left border-bottom border-right border-primary">
                        dssdf
                    </div>
                </div>
                <div class="row h-25">
                    <div class="col-12 border-left border-bottom border-right border-primary overflow-auto h3 mb-0">
                        fda
                    </div>
                </div>          
                <div class="row h-25">
                    <div class="col-12 h-100 border-left border-bottom border-right border-primary overflow-auto h3">
                        e
                    </div>
                </div>
            </div>
        </body>
    </html>

Answer №2

To achieve no margin, simply include the m-0 class.

<div class="row h-25">
    <div class="col-12 border-left border-bottom border-right border-primary overflow-auto h3 m-0" style="">
         fda
    </div>
</div>

Answer №3

While inspecting the page, I noticed a slight bottom margin of 0.5rem on the second to last row.

Fixing this issue in Bootstrap is as simple as adding mb-0 to override the CSS property.

m = margin, b = bottom

<div class="row h-25">
   <div class="col-12 border-left border-bottom border-right border-primary overflow-auto h3 mb-0">
       fda
   </div>
</div>

Answer №4

padding-top: 0;

By setting the padding at the top to zero, you can likely eliminate the gap between the two sections, effectively removing any unwanted spacing at the top.

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

Displaying a div when hovering over it, and keeping it visible until clicked

I want to display a div when hovering over a button. The shown div should be clickable and persistent even if I move the cursor from the button into the shown div. However, it should be hidden when moving out of the entire area. I'm unsure about how ...

javascriptjqueryhtmlcss

What sets srcset apart from media queries?

Can you explain the contrast between srcset and media query? In your opinion, which is more optimal and what scenarios are ideal for each? Appreciate it! ...

javascripthtmlcssmedia-queriessrcset

Mobile navigation menu options on the left and right sides

I've encountered an issue with my mobile navigation. I have two navigation menus - one on the left and one on the right, designed to slide out when triggered. The left menu functions correctly with a smooth transition, but the right menu abruptly pops ...

jquerycssnavigation

Maintain scrolling at the bottom with React.js

Is there a way to make a div element increase in height through an animation without extending beyond the viewable area, causing the window to automatically scroll down as the div expands? I am looking for a solution that will keep the scroll position lock ...

javascriptcssreactjs

Delete the option to alter button in the Jasny file input tool

I recently incorporated the Jasny Fileinput Widget into my existing form. However, I noticed that when I select a new file, it displays two buttons: Change and Remove. In this case, I believe the Change button is unnecessary and would like to remove it com ...

phpjquerycssfile-uploadjasny-bootstrap

Font compatibility issue in email template on mobile devices

When I send out my email template, Agency FB font displays correctly in the desktop view, but reverts back to PT-sans in device view. I've ensured that the font family is set to Agency FB and included the URL link. My emails are sent using MailChimp. ...

htmlcssfontsmailchimpemail-templates

Dynamically indicate the destination for AJAX success feedback across various forms

Here are a couple of inquiries: Is there a way to incorporate a second form on the same page and dynamically handle each form based on which submit button is clicked? Let's say I have several forms on one page. How can I alter the output destina ...

javascriptphpjqueryhtmlajax

Add some pizzazz to your design using jQuery!

I have been working on a web application using asp.net c#. I have a div element where I applied the following style to it at the server side: spanNivelRiesgo1.Attributes.Add("style", "display:none; visibility:hidden"); Now, I have a radiobutton list and ...

c#jqueryhtmlcss

I've come across a challenge in my React PDF project where I am struggling to display the bottom and right margins, as well as the borders, in my reactPDF

I am currently working on creating a PDF using the @react-pdf/renderer library within my React project. Everything seems to be functioning correctly except for an issue with the right and bottom margins not appearing in the PDF. Strangely, the top and left ...

cssreactjsbordermarginreact-pdf

The menu seems to be off-center

I'm struggling to center my menu/navigation bar horizontally. I can't seem to figure out what mistake I've made or what I've forgotten. Additionally, there is right padding after my last list item. How can I get rid of it? HTML <di ...

csshtml

Numerous intersecting lines on display within Google Maps

Currently, I am working on displaying multiple flight routes on Google Maps. I have implemented polylines with geodesic to achieve this functionality successfully. However, a challenge arises when more than two flights intersect the same route, causing o ...

javascriptjqueryhtmlgoogle-mapsgoogle-maps-api-3

Firefox allows for the HTML to render even if CSS links are included in the head section

I've been struggling with a persistent issue for some time now. From what I've gathered, including <link> tags in the <head> of a Firefox page is supposed to halt rendering until those resources are fully loaded. To test this, I inser ...

htmlcssfirefoxdrawing

Resolve the issue of text overflow in PrimeNG Turbo Table cells

When utilizing Primeng table and enabling the scrollable feature, the table is expected to display a scrollbar while ensuring that the text within the cells does not overflow. Unfortunately, this expected behavior is not occurring. To see an example of th ...

cssangularresponsive-designprimengprimeng-turbotable

"Error message stating 'Unresolved variable' occurs in the code while trying to assign className={styles.nameOfClass

My current task involves adjusting the style of a button in ReactJS using the "className" property. However, I encountered an error message in WebStorm stating "Unresolved variable nameOfClass," and the desired style changes did not reflect when running we ...

cssreactjstypescript

Exploring the functions of Safari input types: search, reset, and normalize

Is there a proper way to reset the appearance of a search input so that it resembles a text field in Safari? screenshot I'm experiencing an issue with Safari where there is unwanted padding on the left side of the search input that I can't seem ...

css

Transferring a selection from a dropdown menu

I am currently working on a dropdown menu where each entry has an ID and a value. The issue I am facing is that when I click on an item on the list, the click-handler is called and passes the div. While the click handler can access the id without any probl ...

javascripthtmlbootstrap-4

The MUI component with hideBackDrop={true} is preventing me from clicking outside of the Drawer component to close it

I implemented a Drawer component which opens when an icon on the Map is clicked. The drawer menu appears along with a backshadow that drops over the map. Interestingly, clicking on the map while the backshadow is displayed closes the drawer without any i ...

cssreactjsmaterial-uimui-datatablemui-x

What is the best way to adjust the width of a table td element using CSS in Spiceworks?

I'm attempting to modify a CSS code snippet for Spiceworks. Here is the specific line that I need to adjust: <td class="body-id cell-id" style="width: 12%; "></td> The following code: SPICEWORKS.utils.addStyle('body{background-col ...

cssspiceworks

Tips for maintaining a highlighted navigation link upon selection in Vue.js

My dilemma involves a navigation bar featuring router-links. My goal is to have the selected link visually highlighted so users can easily identify which page they are on. The current setup looks something like this: <div class="mynav"> ...

htmltwitter-bootstrapvue.js

information not visible on the webpage

Recently, I made an alarming discovery on my website. I have implemented two different types of menus - one for the front page (designated as .navbar-inverse) and another for all other pages (.navbar-default). The front page menu is static while the other ...

jqueryhtmlcsswordpresstwitter-bootstrap