Issue with Divs Spacing - margin-bottom not functioning as expected

I've encountered a question where the provided answers do not seem to solve my problem. I attempted to adjust the padding and margin-bottom on the Divs, but with no success.

My goal is to minimize the gap between these three divs:

https://i.sstatic.net/gLWDD.png


                .center-div {
                    margin: 0 auto;
                    width: 150px;
                    border-radius: 3px;
                }

                .title_top,
                .title_center,
                .title_bottom {
                    margin: 0 auto;
                    /* float:left; remove */
                    padding: 0 5px;
                    margin-bottom: 0;
                }

                h1 {
                    color: #111;
                    font-family: 'Helvetica Neue', sans-serif;
                    font-size: 30px;
                    font-weight: bold;
                    letter-spacing: -1px;
                    line-height: 1;
                    text-align: center;
                }
                
            
<div class='center-div' style="background-color:lightgrey">
                <div class="title_top" style="text-align: center;">
                    <i class="fa fa-user"></i> Total Users
                </div>
                <div class="title_center" style="text-align: center;">
                    <h1>2500</h1>
                </div>
                <div class="title_bottom" style="text-align: center;">
                    <i class="fa fa-arrow-up" aria-hidden="true" style="font-weight: bold; font-size: large; color: #009900;"></i>
                    <i> 4%</i> From last Week
                </div>
            </div>
csshtml

Answer №1

Your <h1> tag comes with a default margin that can be removed:

.center-div {
  margin: 0 auto;
  width: 150px;
  border-radius: 3px;
}

.title_top {
  margin: 0 auto;
  /* float:left;  delete */
  padding: 0px 5px;
  margin-bottom: 0;
}

.title_center {
  margin: 0 auto;
  /* float:left;  delete */
  padding: 0px 5px;
  margin-bottom: 0;
}

.title_bottom {
  margin: 0 auto;
  /* float:left;  delete */
  padding: 0px 5px;
  margin-bottom: 0;
}

h1 {
  color: #111;
  font-family: 'Helvetica Neue', sans-serif;
  font-size: 30px;
  font-weight: bold;
  letter-spacing: -1px;
  line-height: 1;
  text-align: center;
  margin: 0;
}
<div class='center-div' style="background-color:lightgrey">
  <div class="title_top" style="text-align: center;">
    <i class="fa fa-user"></i> Total Users
  </div>
  <div class="title_center" style="text-align: center;">
    <h1>2500</h1>
  </div>
  <div class="title_bottom" style="text-align: center;">
    <i class="fa fa-arrow-up" aria-hidden="true" style="font-weight: bold; font-size: large; color: #009900;"></i>
    <i> 4%</i> From last Week
  </div>
</div>

Answer №2

To decrease the margin for your h1 element, consider using the following predefined style classes: margin-5 or no-margin

.center-div {
  margin: 0 auto;
  width: 150px;
  border-radius: 3px;
}

.title_top {
  margin: 0 auto;
  /* float:left;  remove */
  padding: 0px 5px;
  margin-bottom: 0;
}

.title_center {
  margin: 0 auto;
  /* float:left;  remove */
  padding: 0px 5px;
  margin-bottom: 0;
}

.title_bottom {
  margin: 0 auto;
  /* float:left;  remove */
  padding: 0px 5px;
  margin-bottom: 0;
}

h1 {
  color: #111;
  font-family: 'Helvetica Neue', sans-serif;
  font-size: 30px;
  font-weight: bold;
  letter-spacing: -1px;
  line-height: 1;
  text-align: center;
}

.margin-5 { margin: 5px !important; }
.no-margin { margin: 0px !important; }
<div class='center-div' style="background-color:lightgrey">
  <div class="title_top" style="text-align: center;">
    <i class="fa fa-user">
         </i> Total Users
  </div>
  <div class="title_center" style="text-align: center;">
    <h1 class="margin-5">2500</h1>
  </div>
  <div class="title_bottom" style="text-align: center;">
    <i class="fa fa-arrow-up" aria-hidden="true" style="font-weight: bold; font-size: large; color: #009900;">
          </i>
    <i> 4%</i> From last Week
  </div>
</div>

<div class='center-div' style="background-color:lightgrey; margin-top: 20px;">
  <div class="title_top" style="text-align: center;">
    <i class="fa fa-user">
         </i> Total Users
  </div>
  <div class="title_center" style="text-align: center;">
    <h1 class="no-margin">2500</h1>
  </div>
  <div class="title_bottom" style="text-align: center;">
    <i class="fa fa-arrow-up" aria-hidden="true" style="font-weight: bold; font-size: large; color: #009900;">
          </i>
    <i> 4%</i> From last Week
  </div>
</div>

Answer №3

You must update the h1 line-height

.center-div {
  margin: 0 auto;
  width: 150px;
  border-radius: 3px;
}

.title_top {
  margin: 0 auto;
  /* float:left;  remove */
  padding: 0px 5px;
  margin-bottom: 0;
}

.title_center {
  margin: 0 auto;
  /* float:left;  remove */
  padding: 0px 5px;
  margin-bottom: 0;
}

.title_bottom {
  margin: 0 auto;
  /* float:left;  remove */
  padding: 0px 5px;
  margin-bottom: 0;
}

.center-div h1 {
  color: #111;
  font-family: 'Helvetica Neue', sans-serif;
  font-size: 30px;
  font-weight: bold;
  letter-spacing: -1px;
  line-height: 0.1;
  text-align: center;
}
<div class='center-div' style="background-color:lightgrey">
  <div class="title_top" style="text-align: center;">
    <i class="fa fa-user">
         </i> Total Users
  </div>
  <div class="title_center" style="text-align: center;">
    <h1>2500</h1>
  </div>
  <div class="title_bottom" style="text-align: center;">
    <i class="fa fa-arrow-up" aria-hidden="true" style="font-weight: bold; font-size: large; color: #009900;">
          </i>
    <i> 4%</i> From last Week
  </div>
</div>

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

I am attempting to create a captivating image for a "jumbotron"

My goal is to achieve a full-width image that stretches across the entire website. Furthermore, I want the image to remain centered and shrink from the sides as the window size decreases. Here's what I've attempted: HTML <div class="site-ban ...

htmlcssimage

Ensuring Proper Alignment of Headers in CSS

I'm struggling to align my header correctly. Despite getting close in Internet Explorer, it looks terrible in Firefox with the code below. I've scoured forums for solutions but the more I try to fix it, the worse it looks. All I want is for heade ...

htmlcsshtml-table

There seems to be a problem with the background repeating space in the CSS

body { background-image: url("https://source.unsplash.com/user/c_v_r/100x100"); background-size: 100px; background-repeat: space; } <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA- ...

htmlcss

What is the role of the .connect() method in Web Audio nodes?

Following the instructions found here, which is essentially a copy and paste from this I think I've managed to grasp most of it, except for all the node.connect()'s As far as I can tell, this code sequence is necessary to supply the audio anal ...

javascripthtmlweb-audio-api

Encountered an error loading resource: server returned a 404 status code while utilizing Angular framework and deploying via GitHub Pages

Currently facing an issue with my Angular website deployment on Github Pages, receiving a console error "Failed to load resource: the server responded with a status of 404 ()" at "home: 1". This error specifically seems to be related to the app.component ...

cssangulartypescriptdeploymentgithub-pages

Troubleshoot: CSS Paths Broken after Deploying Django App on AWS Elastic Beanstalk

I recently deployed my first simple Django 1.8.6 application to AWS via Elastic Beanstalk. While everything appears to be working properly, the styles are not loading as expected. Below is the template code: {% load blog_tags %} {% load staticfiles %} ...

cssdjangopython-3.xamazon-web-servicesamazon-elastic-beanstalk

What's the best way to merge data from two separate PHP class files into a single file?

As I develop a registration form, I have created three distinct classes: the database file for fetching data from the database, the display file for the HTML templates, and the controller file for getting data from both of these files. My current challen ...

phphtmlmysql

Using various JavaScript files within an HTML document

Currently, I am working on coding in P5JS and I have encountered an issue. I am attempting to incorporate multiple JS files into my HTML page, however only the last one is being displayed. How can I make all of them visible? Additionally, I would like to s ...

javascripthtmlcss

Place a <div></div> element within a collapsible accordion container that conceals the content inside the <div>

My accordion is expanding, but the div inside it appears blank instead of displaying its content. Any suggestions on how to fix this? Thank you. How can I ensure that the div inside the accordion shows its content? Here is the code: http://jsfiddle.net/6 ...

javascriptjqueryhtmlcss

Identifying the names of files downloaded from Google Patents

I have a collection of over 500 links from Google Patents stored in a CSV file. Using Scrapy, I am able to iterate through these links and download the CSV files associated with each link (each link has a download option). The challenge I am facing now i ...

pythonhtmlweb-scrapingscrapy

Issue with autocomplete feature in Safari on Gatsby input field

Can anyone help solve this issue I'm facing on my Gatsby site? I have an input field for user emails with autoComplete working perfectly on Chrome and Android, but not on Safari Desktop or mobile. Any suggestions? <input type="email" id ...

htmlreactjsgatsby

Is there a way to create a delay before the audio tag plays?

I've implemented an MP3 player using the <audio> tag in HTML5. <audio controls="controls" autoplay="autoplay"> <source src="song.mp3" type="audio/mp3" /> </audio> While everything is working smoothly, I'm interested i ...

javascriptjqueryhtmlhtml5-audio

The positioning attribute and flexible height in CSS are essential for creating dynamic

My goal is to create a layout with 3 DIVs inside a container, similar to table rows. top {height = 100px} / middle {height = dynamic} / bottom {height = 100px} I am trying to figure out the best approach to make the height of the middle div dynamic whi ...

cssposition

In what way can I obtain CSS comments utilizing jQuery?

I am trying to figure out how I can access CSS comments that are included in an external stylesheet. In order to demonstrate, I have loaded a sample CSS using the following code: <link rel="stylesheet" type="text/css" media="all" href="test.css" /> ...

jquerycsscomments

Issue with background-image preventing overflow: hidden and ellipsis from hiding text overflow

I have encountered an issue where I need to hide text with ellipsis, but it isn't working properly when there is a background image in a div before the text. You can see the problem demonstrated here: https://jsfiddle.net/ypbgkrod/6/ .block { dis ...

htmlcssflexbox

After trying out the demonstration on the website, I am unable to get my submit button to work

Having trouble with my Formsubmit feature. Despite following the example on the website, my submit button doesn't send anything and the verification isn't reaching my email. Currently working with Angular. <form action="https://formsubmi ...

htmlform-submit

What is the method for modifying the background color of the table head (thead) and adjusting the text color in an `antd` table

I am looking for guidance on adjusting the background color of a table header (thead) and text color in an antd table from the antd ui library. Can you please provide instructions on how to do this? ...

cssantdant-design-pro

Choosing an option from a dropdown menu using Selenium

I'm a beginner with selenium and I'm attempting to select an option from a dropdown menu. Here is the HTML for the dropdown: <input type="text" ng-blur="getInventoryStatus()" typeahead-on-select="onDeviceSelect($item)" typeahead="device ...

htmlseleniumselenium-webdriver

The synchronization of template stamping with the connectedCallback function

Issue Explanation It appears that there is a timing discrepancy with Polymer (2.x) when querying for nodes contained within a template element immediately after the connectedCallback() function has been executed. Ideally, the initial call of this.shadowRo ...

javascripthtmlpolymerpolymer-2.x

Issue with Bootstrap 4 form failing to submit select box content

I have designed a basic bootstrap 4 form using a GET method, but it seems to only send the values from the Submit button and not from the select tag above it. Although the intention is for this to later be handled with a POST request, I have temporarily s ...

htmlformsbootstrap-4