Why are my buttons displaying uneven spacing?

I'm stumped trying to figure out what's causing the strange spacing issue you can see in this image https://i.sstatic.net/11Fj5.png (unfortunately, I can't embed images yet...sorry) https://i.sstatic.net/z0P5Q.png taken from . Here is the CSS code relevant to the problem:

.page-btn { background: #19FF19; color: #FFF; border: 0; border: 3px solid transparent; }
.page-btn.cur-page { border-color: #FFF; cursor: pointer; }
.page-btn + .page-btn { margin-left: 5px; }

I've thoroughly inspected the elements to rule out any issues. What could be causing this unexpected behavior?

htmlcss

Answer №1

There seems to be a new line character causing issues in your HTML code right after the first button:

<button class="page-btn cur-page">1</button>
<button class="page-btn">2</button><button class="page-btn">3</button>

To resolve this issue, try putting everything on one line without any extra spaces:

<button class="page-btn cur-page">1</button><button class="page-btn">2</button><button class="page-btn">3</button>

Your CSS is good to go and doesn't require any changes as per feedback from other users.

Answer №2

Hey, give this CSS a shot!

#page-btns-holder {
    width: 80%;
    margin-top: 12px;
    font-size: 0;
}
div#page-btns-holder * {
    font-size: 14px;
}
.page-btn {
    background: #19FF19;
    color: #FFF;
    border: 0;
    border: 3px solid transparent;
    display: inline-block;
    vertical-align: top;
    font-size: 14px;
}

When defining your btn, make sure to set its display as inline-block and remove any spaces between the elements with that same display property. Set the parent element's font size to 0, and then define the child element's font size as 14px, following this example.

Learn how to Remove Whitespace Between Inline-Block Elements

Answer №3

Experiment with reducing the font size of the main content to zero, and play around with setting letter spacing to zero as well.

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

Calculation for determining the fill of a DIV's remaining height

Here is what I have: <div id="modal-container"> <div id="modal-body"></div> <div id="modal-footer"></div> </div> I am currently working on a JavaScript function to adjust the height of #modal-body to fill in the re ...

javascriptjquerycss

What is the method for creating a beveled text effect using CSS?

Is there a CSS-only method to achieve a beveled text effect? https://i.sstatic.net/s4Wlw.png Just to clarify, I'm seeking a way to make text appear thick with a beveled style rather than using something like text-shadow which simply extends the font ...

css

Delivering HTML with Python Socket Server

I am currently learning about HTTP/CGI and exploring how to display HTML content on a webpage through the use of the socket library in Python. However, I am encountering some confusion regarding the correct syntax for this task: #!/usr/bin/env python impo ...

pythonhtmlsocketshttp

BeautifulSoup: Discovering all hyperlinks within a specified div class

Currently, I am in the process of gathering all href's from a div with the class 'server-name' on disboard.org/. Source-Code: def gather_links(): url = 'https://disboard.org/search?keyword=hacking' response = requests.get ...

pythonhtmlbeautifulsoup

What could be causing my navigation bar to malfunction?

Being fairly new to HTML and CSS, I have been struggling with my nav bar. Despite multiple attempts to fix it, the dropdown items do not appear when hovered over. Changing display: none; to display:block; only results in the items dropping down to the next ...

htmlcsshoveruinavigationbarnav

How can you create a jQuery fade in effect for a single <li> element

I'm in the process of developing a task management app that generates a new li element every time a user adds an item. However, I am facing an issue where fadeIn() is activating for every li on the page whenever a new item is added. Does anyone have s ...

javascriptjqueryhtmlcss

Initial loading issue with HTML5 Canvas in Android WebView

As I work on developing a HTML5 canvas-based game within a WebView of an existing application, I encounter a puzzling issue. Upon the initial run of the game, everything seems to be in order - logs indicate that it's ready and running, yet nothing is ...

androidhtmlcanvashtml5-canvasandroid-webview

Which HTML layout is more efficient for the web browser?

It seems to be widely believed that we should only use tables for tabular data, and not for layouting. I agree with this principle and understand the reasons behind it, including performance considerations. Has anyone conducted real benchmarks comparing ...

htmlperformancebrowserlayout

Using CSS to place my logo within the navigation bar

Currently, I am struggling to find tutorials that can assist me in aligning the responsive navigation bar with the logo. As a newcomer to HTML & CSS and website creation, I would greatly appreciate any guidance on positioning it correctly. Additionally, co ...

htmlcssnavigationbar

What is the best way to responsively position a bootstrap button?

Recently diving into the world of CSS and Bootstrap, I encountered an issue with a Bootstrap button on my webpage. Despite my efforts, I couldn't seem to make it responsive to window resizing. It feels like there's a glitch in the code somewhere, ...

htmlcssbootstrap-4

Live visualization from a Remote System (External Network)

I am looking to visually represent real-time sensor data (streaming data) using Node.js, HTML, and MySQL. I have set up MySQL to store the real-time sensor data, an index.html file that implements Google Chart through the doPoll app.js file, and the app.js ...

htmlmysqlnode.js-stream

Express Form Validation: Ensuring Data Accuracy

I have recently learned that client-side form validations may not be sufficient to prevent malicious actions from users. It is recommended to also validate the form on the server-side. Since I am new to using express, can someone provide guidance on what s ...

javascripthtmlnode.jsexpress

Filter a div based on multiple conditions using JavaScript/jQuery

In my filtering system, I have two sections: place and attraction. When I select a place, the corresponding div is displayed according to the selected place. Similarly, when I select an attraction, only the attractions are filtered accordingly. <ul clas ...

javascripthtmljquery

Searching for mobile WiFi preferences through a web browserHere are the steps to

Is there a method to access mobile connectivity settings through a website? I am interested in determining the connection type (3G\4G\WiFi) and if it is WiFi, identifying the security method being used. Is this achievable? If so, how? Edit: If ...

javascripthtmlmobile-safarimobile-website

html text alignment in the center

Is there a way to align text in the center without shifting the starting position of the first letter? before text 1 text text text 2 text text after ...

htmlalignmentcenter

Update the content of a div element without having to fetch an external file

I have a question regarding using JQuery with PHP and MySQL. Here's the situation: I have a div that displays a user's points, but the points change due to various actions on the website. I've come across many scripts that use external file ...

phphtmlajaxrefreshinternal

Beginner attempting to comprehend Safari CSS font-size test outcomes

Currently, I am delving into the realm of CSS. To test my skills, I am making edits to an HTML file and previewing the outcome in Safari V11.0. My objective is to present an online version of a traditional printed report, complete with fixed columns and a ...

cssfontssafari

Automatically refresh and update HTML content

I've created a temp.php file that generates output in JSON format: [{"Date":"2016-10-25 16:12:30","Temp":"1.00"},{"Date":"2016-10-25 16:24:05","Temp":"1.00"},{"Date":"2017-02-25 23:04:04","Temp":"1.00"},{"Date":"2017-02-25 23:05:34","Temp":"1.00"},{" ...

phphtmlajax

Chrome not loading all the videos on a single page

Currently, I am working on a project that involves loading multiple videos on a single web page. The code snippet I am using looks like this: <div class="video_content left"> <span style="font-weight:bold">1</span> <video wi ...

htmlgoogle-chromehtml5-video

How can one safeguard their JavaScript code from potential threats and unauthorized access?

How can I ensure that a web app is not accessible or operated from the local file system? The app has a custom front-end workspace created with JS and various libraries, which should only be usable when the user is logged in to the domain with an active i ...

javascripthtmlcss