What is the best way to eliminate the blank space between div elements on a webpage?

I'm currently working on enhancing my portfolio website, and I'm struggling to eliminate the excessive white space.

After inspecting the element, it appears that there is styling related to ul.AMSI, but it's not referenced anywhere in my styles.css file.

The image is hosted at https://i.sstatic.net/Oke33.png

I've tried using inspect element, but unfortunately, it hasn't provided much help.

If anyone has any hints or suggestions, they would be greatly appreciated.

URL :

update

Many thanks for all the support

Here are the steps I have taken:

Removed all padding and margins from AMSI li elements

.AMSI li {
    list-style: none;
    display: inline-block;
    text-align: center;
    color: #EC7108;
}

I have also commented out margins and paddings in various sections of my code hoping to pinpoint the issue, but to no avail.

As a last resort, I changed the body background color to hex #EC7108.

Despite my efforts, I am unsure how to proceed further with resolving this problem and hence, I seek input from the talented developer community.

htmlcssmarginpadding

Answer №1

One issue lies within the <ul> element. To resolve it, apply the following style:

.AMSI {
    margin-bottom: 0;
    padding-bottom: 0;
}

Applying this style alone may not completely solve the problem. Check for an extra <p></p> tag on the page immediately following the <ul> element.

If found, remove this unnecessary <p> tag (especially if it's empty and redundant). This tag has a margin-bottom of 1rem which creates additional white space.

Answer №2

Upon examining the webpage, it seems that the issue stems from the styling applied to the unordered list containing your social media icons.

.AMSI li {
    list-style: none;
    display: inline-block;
    text-align: center;
    color: #EC7108;
    padding: 4px;
    margin-bottom: 10px;
}

The culprit is likely the margin-bottom property in the CSS.

Answer №3

To fix the issue with the ul class "AMSI", make sure to set margin-bottom: 0.
Also, there is an empty p tag below the ul class "AMSI" with margin-bottom; you can simply remove it.

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

Calculating square roots in AngularJS

I'm building a basic calculator using a combination of HTML, CSS, and AngularJS. Overall, everything is functioning correctly, but I’m looking to incorporate a SquareRoot function into the calculator. Here’s a snippet of my code: function _solv ...

htmlcssangularjssquare-root

Ways to display certain JSON elements

I'm attempting to retrieve a specific part of a JSON file through AJAX and display it in an HTML div. I only want to show a certain object, like the temperature. Here is the AJAX code: $(function () { $.ajax({ 'url': 'http://ap ...

javascripthtmljqueryjsonajax

creating an HTML document with 2 interactive elements

In my app.js file, I have defined routes using Angular and included references to HTML files. However, when I run the file, it only displays two controls instead of what is expected. Below is a snippet from my login.html file: ![<!DOCTYPE html> < ...

htmlangularjsforms

The dropdown navigation bar fails to close upon being clicked

I'm currently facing an issue with the navbar in my project. The bootstrap navbar doesn't close automatically after clicking on a link. I have to move my mouse away from the navbar for it to close, which is not ideal. Additionally, I'm worki ...

htmlcsstypescript

Overflow on flex layout causes line breaks

I am facing an issue with two divs in a flex container where I want them to be displayed on separate lines when they overflow .container { background: wheat; padding: 10px; width: 300px; display: flex; justify-content: space-betwee ...

css

Moving draggable items out of a div and placing them into a designated droppable area

I'm facing an issue with dynamically creating draggable "divs" within a "table" and trying to make them drop into multiple droppable areas. The problem is that when I drag the element, it leaves a gap and upon dropping, it lands in multiple places ins ...

jqueryhtmljquery-uijquery-ui-draggablejquery-ui-droppable

Utilize Jsoup to retrieve a specific value from a designated HTML source

I am currently working on a project that involves extracting all currency values and their corresponding names from a specific website. These extracted values need to be stored in two separate arrays. While researching online, I came across some code snip ...

javahtmlparsingjsoup

Is it possible to save an entire webpage that infinitely scrolls without actually manually scrolling through it?

I'm dealing with a webpage that has infinite downward scrolling. I tried automating the scrolling, but eventually the page became too large to continue scrolling. To fix this, I manually removed some DIV blocks from the source code which decreased the ...

javascriptjqueryhtmlajaxinfinite-scroll

Understanding the Code for Responsive Web Typography with line-height in ems

I am currently trying to delve into the CSS calculation process behind the styling in the code snippet provided. This code snippet is from a responsive WordPress theme, and I am struggling to decipher how the em values for the line-height of the <h> ...

webtypographycss

The mouse scurries away once the div height has been adjusted

How can I make the height of #header change when hovering over #hoverme, and then revert back to its original height when the mouse leaves #hoverme? If anyone knows a solution, please check out my jsfiddle as it's not working as I intended. Here is ...

javascriptjquerycssheight

Eliminating the vertical scroll on a webpage with the help of Bootstrap 5's responsive design capabilities

I've been tasked with converting a Figma design into an HTML page using Bootstrap 5. Take a look at the Figma design: https://i.sstatic.net/jo5Si.png However, there's an issue causing a vertical scroll bar to appear on the page. The culprit see ...

htmlcssbootstrap-5responsive

Choose the checkbox if the tablerow includes specific text

I am working with a table that has two columns. The first column consists of checkboxes and the second column contains attribute names. My goal is to select the checkboxes next to a cell that includes specific text. Below is the structure of my table: &l ...

jqueryhtmljquery-uihtml-table

Flipping and rotating images using the power of HTML5 Canvas

Hello, I need assistance with my Electron app that arranges images for batch printing on an industrial printer. The issue I am facing is with images flipping or being mirrored unpredictably. Below is the code snippet responsible for determining whether an ...

javascriptnode.jshtmlhtml5-canvaselectron

Error: Unable to locate module 'next/font/google/target.css'

After setting up Next.js version 14.0.1 on Node.Js v20.9.0 and Ubuntu 20.04, I encountered an error right from the start. Failed to compile /var/www/html/C#/nextApp/app/layout.js Module not found: Can't resolve 'next/font/google/target.css?{&quo ...

cssnode.jsnext.js

Managing line breaks in CSS

Here is a sample of HTML code with text lines breaking: <pre> one two three four five six </pre> I am looking to display it in the browser like this (with two lines per row and space using tab character "\t"): one two three four ...

htmlcss

An iframe for the Vimeo player set to 100% of

I encountered some challenges while styling the Vimeo video I embedded. Here is the player I am using: I want the player to occupy the entire screen for all viewport sizes, so I applied min-width: 100vh and min-height: 100vw. I was able to adjust the wi ...

cssvue.jsvimeo-player

Exploring reviews with an innovative combination of Node.js and MongoDB

Recently diving into the world of Nodejs and mongoDB, I am excited to create two distinctive pages: one for users to update their account details such as profile picture, email, and name - all of which would be saved into the database; and another for re ...

htmlnode.jsmongodb

Div remains fixed while scrolling until the footer is reached

Hi there, I could really use some assistance with a jQuery issue I'm facing. I've been watching tutorials in an attempt to find a solution, but being new to jQuery, I'm struggling. My goal is to scroll a fixed div down the page, however when ...

jqueryhtmlscrollfixed

Strategies for Resolving Table Alignment Problems using HTML and JavaScript

I am struggling to figure out how this dashboard will function as it is not a live website, but rather a tool that pulls data from a chemical analysis program and displays it in a browser view. My main issue is aligning two tables at the top of the page ...

javascripthtml

Button halts the playback of numerous audio tracks simultaneously

I'm in the process of creating a Launchpad, where each row consists of 8 buttons/audio tracks and a stop button. My goal is for each stop button to halt all audio playing on that specific row when pressed—for instance, pressing Stop Button 1 would c ...

javascripthtmlfunctionaudioonclick