Align the text vertically in a div, ensuring there is only a small amount of padding above and below it (using spectre.css

For instance: https://jsfiddle.net/notayam/4mLzus0y/

I tried setting top-padding and bottom-padding to zero, but even though the box model inspector shows 0 above and below, there is still some blank space as shown in the jsfiddle link. Also, the text is not centered vertically.

Even after adding 

vertical-align: middle !important;
, the issue persisted.

Eventually, I managed to center it vertically by experimenting with different values for line-height, yet the unwanted padding around the text remained.

Looking back at some old code that utilized bootstrap, I noticed a similar scenario that I had somewhat solved before. The older code used display: inline-block while this one was using block. I attempted to forcefully apply 

display: inline-block !important;
here without success. Despite both my CSS and spectre CSS specifying inline-block, the element displayed as block in the inspector, leaving me puzzled about where the discrepancy originated from or why the override failed.

Any guidance on debugging CSS more efficiently would be highly appreciated. My main objective is to efficiently display tabular data in a compact manner, eliminating the need to deal with CSS complexities in the future.

The remainder of the application relies on Python 3/Airium/Bottle, which might be relevant information. It is being run on Firefox 100.0.2 on MacOS 12.1, with only local deployment planned, making support for other browsers irrelevant for now.

cssspectre.css

Answer №1

.button {
    margin-top: 0 !important;
    margin-bottom: 0 !important;
    width: auto !important;
}

Answer №2

It's possible that I may not fully grasp your request, but here is a potential solution:

.btn-group .btn {
  padding-top: 0;
  padding-bottom: 0;
  /* This adjustment removes any excess line height */
  line-height: 1em;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

By converting your buttons to flex boxes, you'll have control over their height and eliminate vertical padding.

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

Optimal Method for altering Material UI Icon's height

Placing two icons from Material UI Icons side by side in a row reveals that although their heights are both set to 24px, the actual height of the paths within each icon differs - one being 18px and the other being 22px. This inconsistency in height is not ...

cssreactjsmaterial-ui

Text appears unclear and fuzzy when using Firefox browser

While my website looks fine on Chrome and Opera, it appears blurry on Internet Explorer and Firefox. I've tried researching and applying different CSS styles, but nothing seems to work. Both my Firefox and Internet Explorer versions are up to date, an ...

htmlcssfirefox

Testing for Compatibility Across Different Web Browsers

What resources do you turn to for testing cross browser compatibility? Lately, I've primarily relied on Chrome developer tools, but they often lack accuracy. I attempted to test some projects using websites that claim to simulate various devices, bu ...

htmlcsscross-browser

CSS - Utilize floating divs to dynamically populate empty spaces

I am currently working on creating a grid layout on my website, . Despite using multiple divs (images) with the float: left; property, I am noticing empty spaces and gaps that are not being filled by the floating divs. Thank you in advance for any assist ...

csscss-floathtmljquery-isotope

Expandable full-width JavaScript accordion for seamless navigation

Currently, I am working on a simple on-page JavaScript application that consists of multiple data pages within one main page. My goal is to create a horizontal accordion effect where clicking on headers on either side will smoothly switch between the diffe ...

javascriptjqueryhtmlcss

Is it possible to adjust the width of a parent element based on the number of child

In this particular example, I have structured a header with a logo-container positioned on the left side, a menu in the center, and a button on the right. The menu consists of 5 top-level items and 2 sub-menus. <div class="container"> <div cla ...

javascriptjqueryhtmlcss

Eliminate unnecessary spacing from the sticky container

Trying to implement a sticky menu in an angular 14 project using angular material 14 has been quite challenging for me. Initially, I attempted to use the 'fixed' position, but encountered issues where the menu would consistently return to the to ...

htmlcssangularangular-material

What is the best way to blend colors in CSS?

Could someone please advise on how to create a box that transitions from silver at the top to white gradually, similar to Apple's homepage background? Appreciate your help as always. ...

htmlcss

How can I ensure that the position of an image within a button remains fixed as the button's width expands upon hovering?

Whenever I hover over the button, it changes width as intended but the image shifts towards the center. My goal is to keep it fixed on the left so it doesn't shift when the button's width changes. Below is my React code: <div> < ...

htmlcssreactjs

Styling the `<thead>` tag in Internet Explorer 7 (IE

This code is functioning correctly in IE8, Firefox, Chrome and other browsers. However, there seems to be an issue with IE7 not recognizing the following line: .defaulttable thead{border-right:55px solid #c7c9cf;} As a result, I am seeing no border in IE ...

cssinternet-explorer-7internet-explorer-6

label positioned above every button in the button group

I'm trying to organize buttons using btn-toolbar (not using btn-group because I want different buttons) and also want to add a label at the top of each button. However, I am having trouble achieving my desired result. Here is the snippet of code I hav ...

htmlcsstwitter-bootstrap

Is it possible to align a div on the same line with an h1 header that spans multiple lines using CSS?

I am currently working on the following code: <h1><span>Test Heading This is the text that I want to display on the right side. This is the text that I want to display on the right side. This is the text that I want</span></h1> < ...

javascriptjqueryhtmlcss

The text on my website is experiencing a cropping issue on the right side

I'm having an issue where the right side of all the text on my website is being cut off. I've tried using Firebug to inspect the element, but it's always a paragraph text and they have different parent divs. I'm not sure what CSS adjust ...

htmlcsswordpress

Is there a way to retrieve the left offset of a floating element even when it is positioned outside the viewport?

My current situation involves creating several panels that are stacked side by side within a main container. Each panel takes up 100% of the viewport width and height. I want to be able to horizontally scroll to each panel when clicking on their respective ...

javascriptjqueryhtmlcssviewport

I am attempting to create a stylish border for the .navbar-collapse element, but unfortunately, my efforts have been unsuccessful so far

I need assistance with adding a border around my mobile drop-down menu. I've tried using .navbar-collapse but it's not working. Any suggestions? Here is a sample image of the mobile size: https://i.sstatic.net/O9oA1.png Below is my code: < ...

htmlcsstwitter-bootstrapborder

What causes the vertical inconsistency in ul li elements?

Can someone help me troubleshoot this HTML5 snippet? The LI elements are not aligning properly and I can't figure out why Item 1 is lower than Item 2. I need them to line up on the same level. Any suggestions would be greatly appreciated. <!DOCT ...

htmlcss

Testing styling with Jest - a comprehensive guide

Currently, I am working on a React project that utilizes SASS (SCSS syntax) for styling and Jest for unit testing. I've run into some difficulties when it comes to testing the styling in my project. To illustrate this issue, let's consider the fo ...

cssreactjssassjestjsreact-testing-library

No response observed upon clicking on the li element within the personalized context menu

I created a custom context menu that pops up when you click on an li element within an unordered list. I'm trying to trigger an alert when clicking on an li item inside the context menu, but it's not working as expected. To handle this dynamic c ...

javascriptjquerycsstampermonkey

Auto-adjusting height container following animation

Through javascript, I am able to adjust the height of my element from 0 to auto as I was unable to accomplish this using CSS. /* Function for animating height: auto */ function autoHeightAnimate(element, time){ var curHeight = element.height(), // Get ...

javascriptjqueryhtmlcssjquery-animate

Ways to show or conceal content using only CSS

Looking for help with switching content using pure CSS. I'm not very skilled with CSS and would prefer to avoid using JavaScript if possible. Any assistance would be greatly appreciated. Below is a snippet of the code: If A is clicked, toggle-on-con ...

htmlcss