What is the reason for the varying sizes of my buttons and the irregular alignment of their contents?

Take a look at this demo using Bootstrap 4 and Material icons :

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

It appears that only the first button is properly sized and its icon aligned correctly, while all icons are of the same size.

I have observed that by removing the following CSS code, the issue is resolved:

.btn-icon::after{
  content: " "  attr(title);
  letter-spacing: -1rem;
  opacity: 0;
  transition: letter-spacing 0.3s ease-out, opacity 0.3s ease-out;
}
.btn-icon:hover::after{
    letter-spacing: normal;
    opacity: 1;
}

However, I still want to maintain that effect. Why is there an additional "ghost padding" appearing on the right side of non-first buttons? And how can I rectify this?

Checkout the corresponding JsFiddle : https://jsfiddle.net/xpvt214o/136541/

Answer №1

Although my previous response had some good points, it was ultimately incorrect. I have now found the accurate solution for you, which lies in the subtle differences;

Here is your original jsFiddle code snippet;

 <button title="Button1" class="btn btn-outline-secondary btn-icon">
          <i class="material-icons">file_download</i></button> <!-- notice the space between button and i elements -->
        <button title="Button2" class="btn btn-outline-secondary btn-icon">
          <i class="material-icons">search</i><!-- What's this? -->
        </button>
        <button title="Button3" class="btn btn-outline-secondary btn-icon">
          <i class="material-icons">filter_list</i><!-- what's this? -->
        </button>

The issue arises from working with inline elements like button. Nesting content within these elements leads to different behavior. The empty spaces left within these elements can be rendered as whitespace by certain browsers, causing discrepancies in appearance.

To address this problem, there are 2 solutions available;

The straightforward approach; eliminate the whitespace from your code

<button title="Button1" class="btn btn-outline-secondary btn-icon">
  <i class="material-icons">file_download</i></button>

Alternatively, a more complex but robust method involves utilizing comments to remove effective html whitespace and ensure stability in case of code reformatting;

<button title="Button1" class="btn btn-outline-secondary btn-icon"><i class="material-icons">
  file_download
  </i><<!-- These comments remove the effective html whitespace!!
 --></button>
<button title="Button2" class="btn btn-outline-secondary btn-icon">
  <i class="material-icons">search</i><<!-- Because you are commenting them out!
--></button>
<button title="Button3" class="btn btn-outline-secondary btn-icon">
  <i class="material-icons">filter_list</i><<!-- Amazing, isn't it?!
--></button>

This is why I tend to use div elements styled as buttons to avoid such cross-browser inconsistencies related to inline elements.

-- Additionally, here is the JSFIDDLE link!

For further guidance on managing whitespaces with inline-block elements, check out this resource.

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

How to centralize a div using jQuery when its width is not known

I have a fixed position div that I want to center in my browser window. Although it can be done with CSS, the issue is that I am dynamically changing the element's width multiple times (due to loading content via ajax), which means the width changes ...

Is there a way to display both the label and the input field in a single line?

How do I align the label and input on the same line with a spacing of 1.5cm between them? I tried using this resource, where it mentioned using form-inline but wasn't successful in achieving the desired layout. https://i.sstatic.net/7MW2H.png Appre ...

Switch out the Angular panel with a simple click event

I have developed an angular application using bootstrap. You can view the app on this plunker link <div class="panel col-lg-3 col-md-3 col-sm-2"> <div class="" id="menu"> <div ng-controller="mylistcontroller" cl ...

Jquery script to update the background of the parent element when Bootstrap Tabs

Currently, I am exploring ways to come up with a more sophisticated solution. However, my proficiency in jquery is somewhat limited at the moment. I believe there must be a more efficient method to achieve the desired function outlined below. In essence, ...

Height set at 100% but not extending to the entire parent element

I've applied min-height: 100vh; to the body, and then height: 100% to the main element. However, the height of the main does not extend fully to its parent container. Could someone please help me understand why this is happening? Thank you. I'v ...

Having trouble with installing create-react-app for my_app using npm because it seems to be stuck on f

I've hit a roadblock while trying to create a react app on my 2011 MacBook Pro. To start, I downloaded the latest version of Node from their official website. Following the instructions from React documentation, I ran the following commands: npm uni ...

Images in Android webview disappearing after first load

When it comes to loading a local HTML file with local images into a WebView on Android, everything seems to work fine on emulators and newer devices. However, I encountered an issue with a much older device running Android 2.3.4. Initially, the images disp ...

Implementing Vue.js Popover for Individual Dropdown Items: A How-To Guide

I need unique information text to display for each dropdown item when hovered. I am using bootstrap-vue and have a loop set up for the dropdown items. <b-dropdown :text="currentColorType"> <b-dropdown-item v-for="colorType in co ...

You cannot assign type 'Node | null' to type 'Node' when attempting to loop through HTML elements in TypeScript

In my code, I am taking a raw Markdown string stored in 'markdownString' and using the marked.js library to convert it to HTML for display on a web browser. My goal is to extract all plain text values from the page and store them in an array of s ...

Stop the Bootstrap row from automatically adjusting to the height of the tallest child column element, and instead utilize the extra space below the smaller element

My current framework is Bootstrap 5.2. I am aiming to create two columns, each with a col-md-6 class inside a row. You can visualize the layout through this image: . The challenge I'm facing is the inability to add another row with col-md-6 element ...

Page design ruined as a result of oversized fonts in IE9 for <h2> elements

Everything looks great on various browsers, except for the notorious IE9. We've implemented a block-style layout with a width of 660px, centered on the page. Despite setting the h2 width to 660px to match the layout, IE9 displays the font size much ...

Using BeautifulSoup to extract a specific tag from a webpage

I am working with HTML code <div class="b-media-cont b-media-cont_relative" data-triggers-container="true"><span class="label">Engine:</span> petrol, 1.6 L<br/> <div class="b-triggers b-triggers_theme_dashed-buttons b-triggers_s ...

Using Ajax to dynamically load page content into a div based on a selection made in a

How can I dynamically load content into a div using Ajax based on the selection made in a dropdown menu? For example, I have a select box with two options: test.HTML and test1.HTML. Below that, there is a div where I want to display the content from eithe ...

Implementing key strokes in an HTML input field within a geckoWebBrowser

I am currently using the "geckoWebBrowser1" component to navigate to a URL that displays a login textbox with the ID: login-email Although I have successfully inserted "[email protected]" into the aforementioned textbox, it is essential to simulate k ...

Attempting to create an aesthetically pleasing HTML container surrounding input fields

I'm attempting to create a border around multiple fields using HTML and CSS. I've tried placing <p> tags around my <form> tags, but it's not achieving the desired effect. Additionally, using <div> tags seems to be complicat ...

Using a personalized function in JQuery

I need to execute a JavaScript function I created after a JQuery event has been triggered. The function in question is called scrambleDot, and I defined it previously like so:var scrambleDot = new function() { //my code }. Here's the attempted implem ...

What is the best way to alter the font size in an SVG?

I have incorporated an SVG icon into my website and obtained the following code from Adobe Illustrator: <svg id="Livello_1" data-name="Livello 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448.05 436.7"><path d="M190.5,66.9l22.2-22.2a23.9, ...

Tips for generating multiple URL destinations within a single hyperlink

I am looking to create a unique feature in HTML where multiple tabs can be opened with different URLs using one link. While I know how to open one link in a new tab, I am unsure of how to simultaneously add another URL that will open up in a separate tab ...

In HTML5, the semantic tag used for indicating the "subsequent article" is

Having trouble with certain HTML5 elements. Imagine there is a blog post on one side, and a preview of the next post on the other side. Which HTML5 element would you suggest for this setup? Some might argue <nav> makes sense, while others could mak ...

What is the reason that setTimeout does not delay calling a function?

I am looking to develop a straightforward game where a div is duplicated recursively after a short interval. Each new div should have a unique ID (ID+i). The concept is to continuously generate divs that the user must click on to remove before reaching a ...