How to remove space above two buttons '+' and '-'?

Related searches

This is my link code: https://jsfiddle.net/robocon321/Lnw198jp/9

<div class="change-button">
  <button class="increase">+</button>
  <input type="text" class="result" disabled="false" value="0"/>
  <button class="decrease">-</button>
</div>

. I tried to remove it by padding and margin but it don't working

Set font-size of .result to 25px instead of 45pxbecause your font-size is affecting. Or else just add display: flex; align-content: flex-start; to class .change-button

How to remove space above two buttons '+' and '-'?, I will also be adding a third button below the second (only 2 buttons are on the website atm). Link to buttons (find them at the bottom left of the� Using the TRIM Function. To remove extra spaces with the TRIM function, follow this procedure: Click on cell A6 to make it the active cell – this is where the function will go. Type =TRIM (A4). Press Enter. The text from A4 with extra spaces will appear in A6, but with all of the extra spaces removed.

Add vertical-align:top; to .decrease & .increase

.increase{
  height: 100px;
  vertical-align:top;
  width: 100px;
  font-size: 25px;
  background-color: rgb(221, 221, 221);
}

.decrease{
  height: 100px;
  width: 100px;
  vertical-align:top;
  font-size: 25px;
  background-color: rgb(221, 221, 221);
}

https://jsfiddle.net/lalji1051/dn9j742s/1/

OR

Add vertical-align:top; to .result

.result{
  text-align:center;
  height: 100px;
  width: 100px;
  vertical-align:top;
  font-size: 45px;
  background-color: black;
  color: white;
}

https://jsfiddle.net/lalji1051/dn9j742s/4/

How can I reduce space between "buttons"?, How is possible to remove that space when selecting and is contain a button element? That little space betwen two button with select like text� I need to make my own toolbar in Android application. Now it looks like this: So you see spaces between buttons. I tried to put negative margin/padding at buttons, but space didn't disappear.

try to use display: flex from change-button class

body{
  font-size:0px;
}
*{
  margin: 0px;
  padding: 0px;
  box-sizing: border-box;
  border:0px solid black;
}

.increase{
  height: 100px;
  width: 100px;
  font-size: 25px;
  background-color: rgb(221, 221, 221);
}

.decrease{
  height: 100px;
  width: 100px;
  font-size: 25px;
  background-color: rgb(221, 221, 221);
}
.change-button
{
  display: flex;
  align-items: center;
}
.result{
  text-align:center;
  height: 100px;
  width: 100px;
  font-size: 45px;
  background-color: black;
  color: white;
}
<div class="change-button">
  <button class="increase">+</button>
  <input type="text" class="result" disabled="false" value="0"/>
  <button class="decrease">-</button>
</div>

Remove little space before button when select box, <button style="margin:5px;">Button 2</button>. Adding margin would do the magic. To make things more clear, Let� This will resolve this particular issue but you may encounter it for other tags such as p as you add them.. For any future issues you find, I would recommend using the browser developer tools (usually found by clicking F12 in the browser or right clicking on an element and choosing 'Inspect Element') to inspect the elements and check the box models.

Give css to change-button class -

.change-button {
display: flex;
align-items: center;

}

How to add the space between two buttons on a basic HTML, Answer: Remove space between the elements on the inline-block elements to fix this problem, however the above two methods are more straightforward. Take a look at the example below : [code]<button style="margin:5px;">Button 1</button> <button style="margin:5px;">Button 2<;/button&gt; [/code] * Adding margin would

Just add float: left; for .increase and .result classes

body{
  font-size:0px;
}
*{
  margin: 0px;
  padding: 0px;
  box-sizing: border-box;
  border:0px solid black;
}

.increase{
  float: left;
  height: 100px;
  width: 100px;
  font-size: 25px;
  background-color: rgb(221, 221, 221);
}

.decrease{
  height: 100px;
  width: 100px;
  font-size: 25px;
  background-color: rgb(221, 221, 221);
}

.result{
  text-align:center;
  height: 100px;
  width: 100px;
  float: left;
  font-size: 45px;
  background-color: black;
  color: white;
}
<div class="change-button">
  <button class="increase">+</button>
  <input type="text" class="result" disabled="false" value="0"/>
  <button class="decrease">-</button>
</div>

How to Remove the Space Between Inline-Block Elements in CSS, I have a DIV which contain some buttons. I want 16px spacing between these buttons inside this DIV. Can someone please tell me how to do this?

I want to give spacing between buttons is there a way to give spacing using bootstrap so that they will be consistent for different screen resolutions. I tried using margin-left But is it the corr

When you pack the widget you can use. self.a_button = Button(root, text="A Button") self.a_button.grid(row=0, column=1, padx=10, pady=10) Using padx and pady you can add padding to the outer side of the button and alternatively if you want to increase the size of the button you can add inner padding using ipadx and ipady.

One method to is to press Cmd + 8 another is to select the button on you toolbar that looks like a backwards P, and the third way is from Word > Preferences > View > Hidden Characters > All. With the hidden characters shown, you might see what is causing the the extra space.

Comments
  • Please add your CSS to your question.
  • Ok @zero298. I will remember it
  • Oh. Can you explain more clearly about the reason what font-size affect the space on the 2 buttons ?
  • Right now the font size is of .result class is 45px and try to decrease the font-size of .result you can see the difference. The input size is fixed but font-size is more so the size of the input is changed. That's why it creates the space before the input. I hope you are clear with my explanation. If not then feel free to ask @ThanhNhậtNguyễn
  • Thanks, I didn't know that. I was trying to answer this question by giving negative top value using position relative, but found that its not good enough. Learnt something new!