"Within the boundaries of two tags, eliminate any spaces when using the display property set

I'm a bit confused about the behavior of display:inline-block. I noticed that when I use inline-block, it displays content in a smaller space across two tags. However, when I switch to using float: left, everything works fine.

Does anyone have an idea why there is extra space with inline-block?

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

.main {
  padding-top:40px;
  padding-left: 40px;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<div class="main">
  <span class="btn btn-primary">Primary</span>
  <span class="btn btn-success">Success</span>
</div>

javascripthtmlcss

Answer №1

Here is a method to achieve this:

.main {
  padding-top:40px;
  padding-left: 40px;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<div class="main">
  <span class="btn btn-primary">Primary</span><span class="btn btn-success">Success</span>
</div>

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

What steps can be taken to solve the JavaScript error provided below?

My objective is to create a new variable called theRightSide that points to the right side div. var theRightSide = document.getElementById("rightSide"); Once all the images are added to the leftSide div, I need to use cloneNode(true) to copy the left ...

javascripthtmlcssweb

Web browser local storage

Looking to store the value of an input text box in local storage when a button is submitted <html> <body action="Servlet.do" > <input type="text" name="a"/> <button type="submit"></button> </body> </html> Any sug ...

javascriptjqueryhtmllocal-storage

Should classes/interfaces/functions be consistently prefixed with the App acronym as a best practice?

As I delve into my Angular project, I find myself contemplating the idea of using the App acronym as a prefix for all Classes, Interfaces, and Functions. This practice is commonly seen in tag components, where adding the App acronym helps avoid conflicts i ...

javascriptangulartypescript

The value of an AngularJS service is not being reflected in the view

I have implemented the stateProvider in my code, and I am facing an issue with updating the breadcrumbs in the header when the state changes. Instead of creating embedded views for each state, I have a service that shares an array of breadcrumbs containing ...

javascriptangularjsangularjs-scopeangular-ui-routerangularjs-service

Enhance your website by adding a <select> element using an AJAX call that

Encountering challenges in dynamically generating <select> elements and then populating them with values from an XML file. The jQuery script appends a <div> containing a select element and adds options based on the data obtained from XML. Thi ...

jqueryhtmlxmlajax

What is the best way to transfer weather data from a server to an HTML text area box?

Recently, I delved into the world of expressJS to set up a local server (localhost:3000). With the power of JavaScript (specifically in a file named app.js), I was able to send simple messages like "Hello World" to the browser. However, now I find myself f ...

javascripthtmlexpress

Tips for extracting tables from a document using Node.js

When converting an XML document to JSON using the xml-js library, one of the attributes includes HTML markup. After parsing, I end up with JSON that contains HTML within the "description":"_text": field. { "name": { ...

javascripthtmlnode.jsjsonparsing

Is it possible to have a PHP variable embedded within an HTML link tag?

<?php $message = ' <a href="' . $link . '">here</a> '; ?> My goal is to include a clickable link in the $message variable for use in the mail() function. However, despite setting $link with the desired link string, it ...

phphtml

Creating an HTML table using a PHP array is a straightforward process that allows for

Is there a way to create an HTML table using a PHP Array? Below is the PHP code: function get_location_list() { global $connect; $query = "select location , SUBSTRING_INDEX(SUBSTRING_INDEX(location,'-',1),'-&apo ...

javascriptphphtmlarrayshtml-table

Extract information from JSON using a filter

Is there a way to extract the data value from the list without relying on index positions, considering that the order of arrays can change? I need to specifically target data where code === "size". Unfortunately, the existing structure cannot be ...

javascriptvue.js

Is a page reload triggered by clicking a webelement?

My Latest Project Lately, I've been working on developing a utility method to enhance my Selenium automation testing. This method aims to locate and wait for web elements efficiently, supporting various locators and incorporating timeouts for better ...

javaseleniumselenium-webdriverhtmlreload

The sorting process fails to make any changes, thus leaving the state unaffected

Is there a way to sort an array of objects in descending order by their id? No errors appear in the console. Even after calling the sort method, the state of allPosts remains unchanged. import { useState } from "react"; import Button f ...

javascriptreactjs

Having trouble with your website's container not wrapping properly?

I've run into an issue where my container is not wrapping a border around the other elements, only around the header. I checked with validators for both CSS and HTML but there are no errors being shown. Does anyone have an idea what might be causing t ...

htmlcssborderwrapper

Issue with host header detected in MERN stack configuration

"proxy": "https://mango-artist-rmdnr.pwskills.app:5000", While attempting to establish a connection between my frontend and backend, I encountered an issue with an invalid host header. The backend is operating on port 5000, and the fr ...

javascriptreactjsopen-sourcemerndevelopment-environment

Guide to adjusting the number of bounces using jQuery's User Interface (UI)

Check out my code on CodePen: http://codepen.io/Chiz/pen/jbwPLO (click anywhere in the blank area) I'm trying to figure out how to adjust the number of bounces a div makes before stopping. For example, I want the div to bounce 10 times and also chang ...

jqueryhtmlcssjquery-animate

The link text does not appear in black color

Can anyone assist in modifying this code snippet? I'm trying to make the text appear black, but it's showing up as light grey on the Dreamweaver preview screen even though the CSS says it should be black. View Fiddle Below is my HTML code: < ...

csshyperlink

Adding event listeners to modal buttons in a Handlebars template is a simple process that involves utilizing the `

I've been working on developing a web application that interacts with a news API to display articles. Each article is presented in a card format, and I have also incorporated modals using handlebars. My goal is for each card's button to trigger ...

javascripthandlebars.jsaddeventlistenersimplemodal

Obtaining the checkbox status from a location other than immediately following the input by CSS alone

I am currently designing a custom checkbox feature where clicking on the label text will toggle the state and display or hide certain text based on the checkbox state, all achieved solely through CSS. The HTML code I have written for this purpose is as fol ...

csshtmlcheckbox

The content within the flex box element is making the flex box element grow in size

I have set up a flex box container with 3 child divs inside, and I would like to maintain the same size ratio for all 3 (1:1:1). However, when I add text to the child divs, the ratios change to accommodate the overflow of text. For example: ...

htmlcssflexbox

Specialized dropdown selection function not triggering upon click

I am facing a challenge in triggering an on-click function whenever a user selects an item from a dropdown menu. This is necessary because the default styling of the dropdown cannot be modified. My objective is to update a field with the selected item&apo ...

javascriptjqueryhtmldropdown