Securing some room beneath the table

I need some extra room below my table.

<table border="0" class="medtable">
    <tr> 
        <th>User</th>
        <th>From</th>
        <th>To</th>
    </tr>
    <tr>
        ...
    </tr>
</table>

The following CSS

table
{
border:1px solid black;padding-bottom:15px
}

However, there is not enough space between the border at the bottom and the text in the table. It is not achieving the desired result. Any suggestions?

Answer №1

Use margin-bottom in place of padding-bottom. Remember the order from outermost to innermost: margin, border, padding, content.

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

Is it possible to override Bootstrap or not?

It's quite a puzzle to figure out when I can and cannot override Bootstrap classes or IDs with custom CSS. For instance, it seems easy enough to change the default navbar-dark background and font style, but altering the font color and size proves to ...

Elevation in design ui component

I am having an issue with the height of a theme-ui component I embedded. Even though the console shows it correctly, it is displaying at 100% height. <Embed src={url} sx={{width: '800px', height: '400px'}}/> This embed is contain ...

Manipulate only the elements inside the designated container

My CSS/bootstrap file is quite extensive and the styles are affecting more than just the elements I intended to target. While I want it to have a broad impact, the CSS changes are impacting the entire page. Renaming every element to [name].slider is not ...

In React development, a div (button) is visible, but in the production build, it becomes hidden from

I have been working on a website for my job, and I have added a "Gallery" button on top of two slideshows. Everything works perfectly fine on the development build, but when it comes to the production build, the button doesn't show up for some reason. ...

What steps can be taken to prompt the layout to transition?

I have an element that sticks to the top based on the current scroll offset. The issue is that the layout doesn't update when there is space available after the stuck element. This creates a ghost gap where the stuck element used to be... http://fidd ...

Display a message indicating unavailability when no events are scheduled and adjust the background color in FullCalendar

In one of my projects, I am utilizing jQuery FullCalendar to schedule appointments for doctors. The doctors should be able to specify their availability between 9 AM - 5 PM on weekdays. If this is not set, the background color of the spans of time not boo ...

Eliminate the loading spinner from the tab on Google Chrome

Recently, I've been working on a project to create a website and have been searching for some innovative ideas. One interesting discovery I made was . What caught my eye was the unique feature where clicking on any tab did not result in the typical sp ...

iOS is not recognizing the <a> tag but is instead honoring the :hover property

Within my list, I have a div element wrapped in an anchor tag. Here is an example of the code: <li> <a href="http://google.com/"> <div id="tease-info"> <div class="inset-img-border fade"></div> <img src=" ...

Forwarding to a specific webpage

`<!DOCTYPE html> <html class="no-js"> ... </body> </html> I'm in the process of developing a website where users can enroll in programs by clicking on an ...

I have multiple div containers on my webpage, and I'm looking for a way to dynamically load data into a specific div without having to refresh the entire page using PHP and Code

Is there a way to load data into only the second div tag when clicking on a link, without refreshing the entire page? I want to ensure that the first and third div tags remain static while allowing the second div tag to be dynamic. <div class="first" ...

When the open button is clicked, the Div will toggle between open and closed states

Recently, some of my questions have not been well-received, which makes me feel a bit disheartened. It's important to remember to be kind when providing feedback. I've noticed that some people downvote without offering constructive criticism, whi ...

What are some successful methods for displaying extensive data lists to users in a meaningful and organized manner?

From dropdown lists to hover menus with fly-out options, there are various ways to present content on a website... I am managing a comprehensive list of U.S. military bases across the world for my website. This list includes both active and inactive bases ...

Tips on resizing images in CSS with accompanying text to prevent overlap

In my school project, I am using cloud9. When utilizing the live preview in a small window pane, my images appear correctly sized. However, upon maximizing my screen browser, the images stack on top of each other and their dimensions increase. My ideal l ...

Ways to expand the height of a child element within a flex container that has been

I am facing an issue with stretching the children of a column flexbox container. While I can stretch one of the flexbox child elements, I am unable to stretch its nested children. Below is an example where .flex-child-2-child and .flex-child-2-child-child ...

Items in Bootstrap row are not aligning in the center

Utilizing the Bootstrap 5 row property for responsiveness on my website, I encountered an issue where two divs placed next to each other did not align at the center of the webpage as expected. There was an unusual gap on the right that I couldn't elim ...

Utilizing the Bootstrap grid system to seamlessly display images

I have been attempting to design a column that is divided into two nested columns, each containing images that should fill the entire height and width of their respective columns. However, I am facing an issue where the images are extending beyond the boun ...

Design adaptable HTML backgrounds

Hello, I am working on a webpage that uses two background images. Here is the CSS I'm using: body{ background: url('<?=base_url();?>/assets/header_bg.png') no-repeat, url('& ...

What is the best way to customize the appearance of a mat-checkbox in Angular using Angular Material?

Is there a way to customize the appearance of a mat-checkbox that actually works? I've tried various solutions without success. I attempted to disable view encapsulation and use classes like mdc-checkbox__background, but nothing changed. Even applyin ...

Centering the logo using Material-UI's alignment feature

Need help centering a logo in my login form using Material-UI. Everything else is centered except for the logo, which is stuck to the left side of the card. I've tried adding align="center" and justify="center" under the img tag, but it's still ...

Having images that are too large in size and using a high percentage can

I'm encountering a strange issue. When I define the width and height of my images in pixels in my CSS file, all my jQuery animations and events work perfectly fine. However, when I switch to using percentages or 'auto' for the image dimensio ...