mysterious button spacing issue
<div class="buttons">
<button id="btn-search" type="submit">Search Engine</button>
<button id="btn-lucky" type="submit">Feeling Lucky Today</button>
</div>
.buttons {
max-width: 290px;
margin: auto;
}
#btn-search, #btn-lucky {
height: 34px;
padding: 0 16px;
margin:0 4px;
border: 1px solid #f2f2f2;
}
Can anyone explain the mysterious spacing between these buttons?
I have implemented Eric Meyer's reset as well.
Your usage of the space( ) between the buttons is causing an issue. Here is a solution to fix it.
.buttons {
max-width: 290px;
margin: auto;
}
#btn-search,
#btn-lucky {
height: 34px;
padding: 0 16px;
margin: 0px;
border: 1px solid transparent;
}<div class="buttons">
<button id="btn-search" type="submit">Google Search</button><button id="btn-lucky" type="submit">I'm Feeling Lucky</button>
</div>To enhance the overall look of your code, consider eliminating the padding CSS. By doing so, your revised code would appear as follows:
<style>
.buttons {
max-width: 290px;
margin: auto;
}
#btn-search, #btn-lucky {
height: 34px;
margin:0 4px;
border: 1px solid #f2f2f2;
}
</style>
<div class="buttons">
<button id="btn-search" type="submit">Google Search</button>
<button id="btn-lucky" type="submit">I'm Feeling Lucky</button>
</div>
I am trying to achieve a 2-column layout with both columns at the same height. This is how it currently appears: And this is how I want it to be: Here is my code snippet: html { background-color: lightblue; font-family: Tahoma, Geneva, sans-serif ...
Is there a way to automatically select a radio button based on the URL path? $(document).ready(function () { function checkRadioBasedOnUrl() { var urlPath = window.location.pathname.split("/"); console.log(urlPath); // ["", "tradeshow ...
Currently, I am working on organizing HTML elements to create a user-friendly interface. Utilizing MVC and ASP.NET for this chat client, I have encountered an issue with correctly arranging the items. The default MVC project in Visual Studio provides a str ...
I am in the process of building a website using WordPress with the 2017 theme. I recently added a link to my page by inserting the following HTML code: <a href="www." target="_blank"><span style="color: #0000ff;">text</span></a> A ...
I am attempting to build a dynamic bootstrap carousel using my json data, and I have implemented jQuery-Template for rendering. Essentially, I am generating the carousel slider on-the-fly from my json data with the help of jQuery-Template. Here is a snippe ...
Is there a way to set two values as default in a dropdown list, and when the page is refreshed, the last two selected values are retained as defaults? Thanks in advance! Visit this link for more information ...
Here is the code snippet: .nav-link-apple { width: 1.6rem; background: 4.4rem; background: url(./Logo.jpg) center no-repeat; } Although the image I added can be seen in inspect on Chrome, it is not visible on the actual webpage. I have tried s ...
I need to show only the last four digits of the SSN and mask the rest with asterisks, like: ****-**-7654 Additionally, I want to implement a toggle functionality where users can reveal or hide the masked characters behind the asterisks. <in ...
Creating page transitions in jQuery similar to "http://support.microsoft.com/." Encountering an issue where after the page transitions are completed, they start from the left instead of the expected right direction. Referencing this fiddle (Working Code) ...
When using the jQUery DataTable plugin, I encountered an issue where the table header text and the image for sorting are not properly aligned. Here is how it looks: https://i.sstatic.net/Kqgz9.png (I want the arrow and the text to be aligned horizontally ...
How can I position the album cover div to the right within the card? I attempted using the align-self: end property, but it did not work. Can someone please assist? .card { border: 1px red solid; width: 450px; height: 150px; border-radius: 5px; ...
I am struggling to arrange images in rows, but I'm facing unexpected outcomes. The images only break to a new line when the page is filled. I attempted to use overflow:hidden, however, the expanding images end up hidden under white space. I can't ...
I am currently working on building my own portfolio website using Django. The main idea behind this project is to create posts showcasing the websites that I have developed. These posts will be featured on a page titled "Projects," where viewers can click ...
I have a query regarding the loading order of scripts in web browsers. I am interested in knowing the most efficient way to redirect users to a mobile website on the client side. For example, if I place a mobile detection script within the <head> se ...
I have a scenario where I have two divs named left and right. The left div contains a list of bullets (li elements) and is floated to the left, while the right div has text and HTML content. At times, either the left or the right div may be taller than the ...
I've been attempting to strategically place multiple shapes in the background using CSS, but I'm facing challenges. While I was successful with my hero section at the top of the page, positioning elements in a section halfway down has proven prob ...
After scouring through numerous Stack Overflow questions and conducting countless Google searches, I am still stumped by the issue at hand. As a beginner in web development, all I want is for this simple page to function properly. Can someone please point ...
I find myself puzzled about the placement of regular Java code in an Android application. Using the Eclipse SDK, when you create an application, it automatically generates a .java file with an OnCreate() method. Should I insert my code within this method? ...
I have a form input that I want to populate with autocomplete suggestions from my database using Ajax. To style the list, I am using bootstrap 4, and I have opted to use the <a></a> tag instead of the <li></li> tag. This is because ...
Just to clarify, I am utilizing react-bootstrap and attempting to incorporate bootstrap. Here is the code I have: import React from 'react' // bootstrap import { Button } from 'react-bootstrap'; const MainDisplay = () => { return ...