Eliminate any empty spaces and gaps present between div elements

Is there a way to eliminate the spaces between div containers at the bottom part of the div with a red border? The following code snippets utilize materializecss.

/*############################ LOGIN STYLE ############################*/
body{
    font: normal 15px "Roboto", sans-serif;
    font-size: 15px;
    padding: 0px;
    margin: 0px;
    background: #ebebeb;
}
a{text-decoration: none;}
h1, h2, h3, h4, h5{font-family: 'mpsemibold', sans-serif;}
a, .transation{
    -webkit-transition: all 200ms ease-in-out;
    -moz-transition: all 200ms ease-in-out;
    -ms-transition: all 200ms ease-in-out;
    -o-transition: all 200ms ease-in-out;
    transition: all 200ms ease-in-out;
}
.extend{max-width: 100%;max-height: 100%;}
.clear{clear: both; float: none;}
.center{margin-left: auto; margin-right: auto;}
.thehide{display: none;}
.align_left{float: left;}
.align_right{float: right;}
.display_table{display: table;}
.inline{display: inline-block;}
.bgwhite{background: #fff;}
/* ###################### start ###################### */
/* header */
#topheader{
    background: #7d7d7d;
    padding: 15px;
}
.logo_wrapper, .menu_wrapper{
    width: 80%;
}
.logo{
    display: table;
    margin-bottom: 10px;
}
/* navigation */
#topnav{
  -webkit-box-shadow: none;
  -moz-box-shadow: none;
  box-shadow: none;
  
}
#topnav li{
    float: left;
}
#topnav li a{
    display: block;
    padding: 5px 8px;
    color: #e5e5e5;
    text-transform: uppercase;
}
#topnav li a span{
    float: left;
    display: block;
}
#topnav li a span:first-child{
    margin-right: 3px;
}
#topnav li a span:last-child{
    padding-top: 2px;
}
#topnav li a.active_menu, #topnav li a:active, #topnav li a:hover{
    color: #fff;
}
#mobile_nav{
top: 80px;
left: 20px;
position: fixed;
z-index:99999;
}
/* dropdown */
#topnav .dropdown_menu{
    z-index: 999;
    position: absolute;
    background: #263238;
    padding: 10px;
    margin-top: 15px;
    border-top: 2px solid #fff;
    
}
#topnav .dropdown_menu li{
    clear: both;
    float: none;
}
#topnav .dropdown_menu a{
    clear: both;
    float: none;
    display: block;
    padding: 5px 8px;
    font-size: 13px;
}
.side-nav li a{
    text-transform: uppercase;
}
/* dropdown */
#topnav .dropdown_menu{
    
}
#topnav .dropdown_menu li{
    clear: both;
    float: none;
}
#topnav .dropdown_menu a{
    clear: both;
    float: none;
    
}
/* right option */
.right_option_wrapper ul{padding: 0px; margin: 0px;}
.right_option_wrapper ul li{
    float: left;
    margin: 0px 5px;
}
.right_option_wrapper ul:first-child{
    margin-right: 15px;
}
.right_option_wrapper ul li a{
 color: #fff;
 font-size: 25px;
}
#idty a{
    font: normal 15px 'Roboto', sans-serif;
    color: #fff;
    padding-top: 7px;
    display: block;
}
#idty a span{
    float: left;
}
#idty a span:first-child{
    margin-right: 3px;
}
.right_option_wrapper img{
-webkit-border-radius: 5000px;
-moz-border-radius: 5000px;
border-radius: 5000px;
}
/* boxes */
#boxes{
    padding: 7px;
}
.box{
    background: #76b729;
    margin: 5px;
    width: 23%;
    color: #fff;
    padding: 10px 15px;
    height: 90px;
}
.box_content_container{
    padding-top: 7px;
}
.box .icon{
    font-size: 4em;
    color: #fff;
    display: block;
    margin-right: 10px;
}
.box h1, h2{text-transform: uppercase; text-align: left; color: #fff; clear: both;}
.box h1{
    padding: 0px;
    margin: 0px 0px 3px 0px;
    font: 400 30px 'Roboto', sans-serif;
}
.box h1 span{
    float: left;
    font: 400 30px 'Roboto', sans-serif;
    display: block;
}
.box h1 span:last-child{
    color: rgba(255,255,25,0.5);
    font: 300 15px 'Roboto', sans-serif;
    padding-top: 3px;
}
.box h2{
    margin: 0px;
    padding: 0px;
    font: 400 10px 'Roboto', sans-serif;
}
/* announcement and workflow */
#second_container .s6{
    width: 49.5%;
    padding: 7px;
}
#second_container .col:first-child{
    margin-right: 5px !important;
}
.title_header{
    font: 500 18px 'Roboto', sans-serif;
    padding: 3px 5px;
    color: #263238;
    overflow: auto;
    margin: 0px;
    border-bottom: 1px solid #76b729;
    display: table;
    position: relative;
    color: #76b729;
}
.title_header span{
    float: left;
    display: block;
    padding: 0px;
}
.content{
    border-top: 1px solid #ccc;
    margin-top: -1px;
    padding: 0px;
}
.content_content{
    border-bottom: 1px solid #ccc;
    padding: 5px;
    padding: 0px;
    margin: 0px;
    
}
.content_content h1{
    font: 500 15px 'Roboto', sans-serif;
    color: #6c6c6c;
    padding: 0px 0px 3px 0px;
    text-align: left;
    border: 1px solid red;
    overflow: auto;
}
.content_content h1 span{
    float: left;
    display: block;
    text-align: left;
}
.content_content h1 span:first-child{
    margin-right: 3px;
}
.content_content p{
    font: 300 13px 'Roboto', sans-serif;
    color: #6c6c6c;
    padding: 5px;
    text-align: left;
}
<!DOCTYPE html>
<html lang="en">
    <head>
        <title>test</title>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no"/>
        <!-- materialize -->
        <script src="http://megamitch.ph/materializecss/js/materialize.min.js"></script>
        <link href="http://megamitch.ph/materializecss/css/materialize.css" rel="stylesheet"/>
        
        <!-- webfont -->
        <link href="http://code.ionicframework.com/ionicons/2.0.1/css/ionicons.min.css" rel="stylesheet"/>
    </head>
    <body>
        <div id="mainwrapper" class="row extend clear center">
            <div class="col s12 extend clear" id="topheader">
                <div class="clear extend">
                    <a id="mobile_nav" data-activates="mobile-demo" style="visibility: hidden;" class="btn-floating btn-large waves-effect waves-light green"><i class="mdi-content-add"></i></a>
                    <a href="index.html" class="left logo extend clear" title="MOT HRIS">Test</a>
                    <div class="right display_table right_option_wrapper">
                        <ul class="left extend">
                            <li><a href="#"><i class="ion-ios-help-outline"></i></a></li>
                            <li><a href="#"><i class="ion-ios-list-outline"></i></a></li>
                            <li><a href="#"><i class="ion-ios-information-outline"></i></a></li>
                        </ul>
                        <ul class="left extend ">
                            <li><a href="#"><img src="core/img/avatar.png" width="30" height="30"/></a></li>
                            <li id="idty">
                                <a href="#"><span>Corp</span><span class="mdi-navigation-arrow-drop-down"></span></a>
                            </li>
                        </ul>
                    </div>
                </div>
                <div class="extend clear nav-wrapper">
                    <ul class="nav extend clear" id="topnav">
                        <li><a href="index.html" title="home" class="active_menu">Home</a></li>
                        <li class="has_dp">
                            <a href="#" title="Company" class="xx"><span>Company</span><span class="mdi-navigation-arrow-drop-down"></span></a>
                            <ul class="dropdown_menu extend clear thehide">
                                <li><a href="#">dropdown menu 1</a></li>
                                <li><a href="#">dropdown menu 2</a></li>
                                <li><a href="#">dropdown menu 3</a></li>
                                <li><a href="#">dropdown menu 4</a></li>
                            </ul>
                        </li>
                       ... [more nested list items] ...
                        <li class="has_dp">
                            <a href="#" title="more" class="xx"><span>more</span><span class="mdi-navigation-arrow-drop-down"></span></a>
                            <ul class="dropdown_menu extend clear thehide">
                                <li><a href="#">dropdown menu 1</a></li>
                                <li><a href="#">dropdown menu 2</a></li>
                                <li><a href="#">dropdown menu 3</a></li>
                                <li><a href="#">dropdown menu 4</a></li>
                            </ul>
                        </li>
                      </ul>
                </div>
                
            </div>
           ... [more nested structure elements] ...
            <div class="col s6" id="right_container">
                sdasd
            </div>
        </div>
    </body>
</html>

htmlcssmaterialize

Answer №1

A common issue arises when elements are styled with display: inline-block, resulting in unwanted spacing between them. To solve this, one simple technique is to ensure that the closing tag of each element is placed on the same line as the subsequent opening tag:

<section>
...
</section><section>
...
</section>

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

What is the method to assign a value to ng-class in Angularjs?

I need to categorize items in a list by assigning them classes such as items-count-1, items-count-2, items-count-3, items-count-4, based on the total number of items present. This is how I would like it to appear: li(ng-repeat="area in areas", ng-class=" ...

javascripthtmlangularjs

Aligning a grid container in the middle

#panelb { background: lightblue; display: grid; grid-template-columns: repeat(auto-fit, 300px); } .card { background: gold; } .imgcard { display: block; width: 100%; margin: 0 auto; } <div id='panelb'> <div class=' ...

htmlcsscss-grid

Showing the outcome of the AJAX call

I have searched extensively for information on how to use AJAX, but I have been unable to find a resource that clearly explains the concept and its workings. When I send an AJAX request to a PHP file using the code below, I can see the response in Mozilla ...

javascriptphphtmlajax

What is a creative way to design a mat-radio-group without traditional radio buttons?

I am looking to create a component that offers users a list of selections with the ability to make only one choice at a time. The mat-radio-group functionality seems to be the best fit for this, but I prefer not to display the actual radio button next to t ...

cssangulartypescriptangular-material

Creating smooth animations in JavaScript without relying on external libraries such as jQuery

Is there a way in JavaScript to make a <div> slide in from the right when hovered over, without relying on jQuery or other libraries? I'm looking for a modern browser-friendly solution. const div = document.querySelector('.fro ...

javascriptjquerycsshtml

What is the widely used term for the container that allows for panning by dragging with a mouse?

I am looking to design a container that extends beyond the width of the page, allowing users to pan by dragging through empty space between controls without zooming in or out. What is this type of container control typically referred to as? I am intereste ...

htmlvue.jsuser-interfacecontrols

Content in the Bootstrap carousel is not displaying properly within the arrow indicators

While working on my project and trying to implement a carousel element, I encountered an issue. The carousel arrows and autoplay options are functional, but the content does not appear between the arrows as expected. First, I included bootstrap in my proj ...

htmltwitter-bootstrapfrontendbootstrap-5

Preventing scrolling in one div while focusing on another div

I am currently in the process of creating a website that functions as a single page site. The main feature of the site is a masonry grid of images. When a user clicks on an item, a detailed panel slides in from the left. Once the panel is closed, it slide ...

javascriptjqueryhtmlcss

The issue of the back button not functioning in the React Multi-level push menu SCSS has

I have been developing a mobile-friendly Multi-level push navigation menu for my website using dynamically generated links based on projects from my GitHub account. I found a push menu on CodePen here and am in the process of integrating it into React inst ...

cssreactjssassnavigationnext.js

Selecting the label "for" will activate both the anchor tag and input tag simultaneously

It seems like I'm having trouble making this work, and it appears to not be possible. That's why I'm reaching out for help... Here is the CSS that is being used: label.btn { cursor:pointer; display:inline-block; } label.btn>inpu ...

css

When working with basic shapes such as "rect" or "circle," the inline SVG may not be displayed

This is the code we are using to style our checkboxes: .checkbox-default { display: inline-block; *display: inline; vertical-align: middle; margin: 0; padding: 0; width: 22px; height: 22px; background: url('data:image/ ...

csssvg

How to reference global Sass variables in a Sass module

My preferred method involves utilizing a global .scss file that houses all the foundational styles, such as primary color selections. Following this, I create separate modules for each React Component to maintain organization and reduce the need for import ...

csssassnext.js

Leap over in a similar fashion to the provided demonstration

In my attempt to create a unique project, I have created this CodePen example. The goal is to have one ball on the circle that remains in a fixed position, while another rotating main ball must avoid touching it at all costs. Points are awarded for success ...

javascriptjqueryhtmlcss

How can you save the output of console.log in JavaScript to a variable and then use that variable in HTML?

Here is the code snippet I've been working on. The first part consists of JavaScript code, and the second part includes HTML. $('#table').on('check.bs.table', function (e, row) { checkedRows.push({First: row.fname, Second: row ...

javascriptjqueryhtmltwitter-bootstrap

What steps can I take to address the problem in iOS 17 where sound is coming from the earpiece instead of the speaker during camera activation?

I have a Progressive Web App where I use the getUserMedia() API to access the camera and HTML audio tags for handling media content. However, ever since updating to iOS 17, I've faced an issue where audio plays through the earpiece instead of the medi ...

javascripthtmlangularionic-frameworkprogressive-web-apps

PHP tag iteration for unordered list segmentation

My current method of fetching data from MySQL is as shown below: $catmapper = new Application_Model_Mapper_BusinessCategoryMapper(); $result = $catmapper->getBusinessCategory(); To display the results, I use a for loop to iterate through and wrap each ...

phpjqueryhtmlcsshtml-lists

What is the best way to relocate a form to the top of the page

I am creating a website to enhance my HTML skills, and I encountered an issue with the sign-in form. Whenever I try to place an image next to the form, it automatically moves to the bottom. I have attempted using padding-top and padding-bottom but to no av ...

htmlcssbootstrap-5

Tips for perfectly centering a SPAN element within a DIV both vertically and horizontally

Here is an example of my HTML code: <div id="slideClick"> <div style="padding: 0; margin: 0 auto; width: 100%; height: 100%; text-align: center; border: 1px solid blue;"> <span class="sideMsg">MESSAGES</span> </d ...

htmlcss

Hide and reveal images on hover by using multiple images or links on a single webpage

Despite my efforts, I haven't been able to find exactly what I'm looking for. My current setup involves an image/content slider powered by Awkward Showcase. Within each slide, I want to incorporate a mouse-in/mouse-out effect that switches and hi ...

javascriptjquerycssslider

Developing a personalized Avada form auto-scrolling algorithm

Our form, created using the Wordpress - Avada theme, needs an autoscroll feature. As users answer questions, the next question appears below, but this is not immediately visible on mobile devices. To address this, we require autoscroll functionality. The ...

javascripthtmljqueryformsautoscroll