Eliminate the gap between an image and a div element

I've experimented with display: block; and vertical-align: bottom;

Unfortunately, neither of these styles have successfully eliminated the gap between the image and the div.

The code I am working with is based on HTML5 and utilizes an external CSS stylesheet.

HTML:

    <p id="missionMembers">
        <img src="" border"0"/>
    </p>

    <div id="footer">
        <div class="twitter-hover social-slide"> </div>
        <div class="facebook-hover social-slide"> </div>
        <a href= "http://www.youtube.com/channel/UCQUQ1EHTu705qdNWaFAz0SA"/> <div class="youtube-hover social-slide"> </div></a>
    </div>

CSS:

#missionMembers {
    text-align: center;
    margin: 0em 0em 0em 0em;
    padding: 0em 0em 0em 0em;
    vertical-align: middle;
    font-size: 0;
    display: block;
}

#footer {
    padding-left: 2em;
    padding-right: 2em;
    margin: 0em 0em 0em 0em;
    background-color:black; 
    height: 68px;
    width: 2000px;
    border: 0em 0em 0em 0em;
    vertical-align: top;
}

(#missionMembers represents the image. #footer corresponds to the div.)

cssimagehtmlmarginpadding

Answer №1

Here is a possible resolution:

#teamMembers {
 text-align: center;
 margin: 0;
 padding: 0;
}

#teamMembers img {
 display: block;
}

#bottomBar {
 padding: 0 2em;
 margin: 0;
 background-color:black; 
 height: 68px;
 width: 2000px;
 border: 0;
}

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 steps should be followed in order to integrate two themes within a single DOM element while utilizing a ThemeProvider?

<ThemeProvider theme={theme}> My goal is to utilize two themes simultaneously on a single DOM element using a theme provider. style={theme.flexRowLeft} Struggling with incorporating multiple themes at once, I am currently restricted to applying on ...

cssreactjsmaterial-ui

Using Python with OpenCV to highlight black pixels on a blank white background canvas

I would like to provide more details about my desired outcome by mentioning that I have attached a test.png file, along with the task I want this script to accomplish. In essence, the goal is to identify all the black pixels and determine their starting a ...

pythonimageopencvimage-processing

Changing the scrolling behavior of an iframe

I'm attempting to update the layout of to resemble . To achieve this, I've created a page with an iframe. However, I'm facing an issue with the iframe scroll function, as it does not match the desired design. I've experimented with t ...

javascriptjqueryhtmlcssiframe

In what ways can CSS be used to create a smoother edge effect on images?

After attempting to add an image to my website, I noticed that its edges appear quite rough. https://i.sstatic.net/Xol9R.png(Note: In the image above, you can observe the jagged surface around the berry). This issue arose when I eliminated the background ...

cssimage

I am trying to display my progress bar in a col-sm-6 format on screens larger than 546px, however, despite my attempts, I am not seeing any changes on the screen

Is there an alternative method if bootstrap is unable to handle this? I have used col-xs-6, but all I want is to display my progress bar in the image shown on small screens. Here is how I want to display my image on small screens. <div class="cont ...

htmlcssgridprogress-barbootstrap-5

When state updates in React, the component will rerender without affecting its style

There seems to be a minor oversight on my part. The issue arises in the parent component where I maintain a state of selected items, which are added from the child component. The background color of the child component changes when an item is selected. Ad ...

javascriptcssreactjsreact-hooks

Switch to another URL if the first one does not load successfully: Try gliding to a second link

Here is the code snippet I am currently working with: Glide .with(activity) .load(hdImage) .placeholder(R.drawable.loading) .transition(DrawableTransitionOptions.withCrossFade(250)) ...

androidimage

Store information in an array for a permanent solution, not just a temporary one

When adding entries to a knowledgebase using the following code, I encounter an issue where the entries are only available during the current session. Upon reloading the site, the entries are lost. Can you help me troubleshoot this problem? Here is a snip ...

javascripthtmlarraysangularjspush

Tips for implementing CSS on all descendants in Gtk3-css?

Nested Components Challenge: I have encountered an issue while attempting to add a background color to GtkComboBoxText. In my approach, I obtain the widget's context and apply CSS styling to it: * { background: red } Surprisingly, this method doe ...

csscss-selectorsgtk3

The Carousel Slider seems to encounter issues when trying to implement it with *ngFor in Angular 8

Currently tackling an issue in Angular 8 where my slider functions perfectly with static data. However, upon attempting to loop through some dynamic data, the 'left' and 'right' buttons on the carousel cease to work. The images also fai ...

javascripthtmlangulartypescriptbootstrap-4

What is the best way to eliminate blank space within a table cell?

The code snippet below includes a set max-width for table cells to ensure they have equal width regardless of their content. The vertical-align is set to top. However, the first cell appears longer than the second and third cells, leaving a significant gap ...

htmlcsshtml-tabletablecell

The jQuery UI Sortable functions are being triggered at lightning speed

I am currently working on a project where users can create a seating chart, add rows and tables, and move the tables between different rows. The functionality for adding rows and moving tables already exists in the code. However, I am facing an issue where ...

javascriptjqueryhtmlcssjquery-ui

Integrate JavaScript with WordPress

How can I get this functioning properly within Wordpress? I have been attempting to connect everything together, but it doesn't appear to be working. Is this the correct way to do it, or am I overlooking something? <script type="text/javascript" s ...

phphtmlcsswordpresscontent-management-system

Hover to stop menu movement

Can someone help me achieve a similar menu hover effect like this one? I'm trying to create a menu with a hold/pause effect on hover, specifically in the section titled "A programme for every vision". The goal is to navigate through the sub menus smo ...

javascriptjquerycss

What is the best way to show checkbox selections based on my database structure?

Two variables, one for checkboxes and the other for checked values are causing an issue in displaying them from controller to view. The code to handle this in the controller is as follows: $scope.infoParticipant = functionThatGetsParticipants(); ...

htmlangularjscheckbox

Creating an interactive map using Python with Folium, incorporating a draggable legend and clickable items for users to easily zoom into specific locations

Looking to create an interactive map with python folium package. Need icons for locations and a draggable legend that allows for repositioning by mouse drag. Also need ability to click on legend items to zoom into corresponding locations on the map. Can s ...

htmlpython-3.xfoliumfolium-plugins

Create a list of items that are enclosed within a parent element

My menu is generated from a php query and the output is as follows: #ultra-menu { width: 92%; background-color: rgba(255, 255, 255, 0.90); position: absolute; left: 0px; right: 0px; margin: auto; border-radius: 35px; max-height: 300px; ...

htmlcss

Automatically capitalize editable input fields

I am currently implementing Jeditable in my datatable and I would like to automatically capitalize text input entries on the form. Is there a way to convert each character to uppercase if it is lowercase? I have some code that I've been working with, ...

jqueryhtmldatatablesjeditable

Looking to manipulate the form submit data before it is submitted using the standard submit event and jQuery? Read on to learn how to remove, enhance, or change

Is there a way to extract data from a form like the one below? <form action="/search/search" data-remote="true" data-type="json" id="search_form" method="get"> <div class="input-group"> <span class="input-group-addon"> <i ...

javascriptjqueryhtmlformssubmit

Moving an image between different routes using a query

enter image description here I am currently working on a project where I need to take an image input file from the user and display it in another route. To achieve this, I am using query parameters. Issue: However, despite my efforts, the image is not bei ...

javascriptimagenext.js