What is the best way to create distance between my buttons?

Can anyone help me with an issue I'm facing where adding margin to my buttons is causing the last button to jump down a row? I have an idea of what might be happening but I'm unsure how to solve it. Below is the CSS code for the buttons, any suggestions on how to proceed?

.button {
  width: calc(100% / 3);
  height: max-content;
  background: white;
  -webkit-box-shadow: 0 8px 6px 10px black;
  -moz-box-shadow: 0 8px 6px 10px black;
  box-shadow: 0 8px 6px -1px grey;
  margin: auto;
  margin-top: 10px;
  float: left;
  margin: 0px;
  font-family: sans-serif;
  font-weight: 100;
  text-align: center;
  padding-top: 10px;
}

<a href="/" class="button">Page1</a>
<a href="/" class="button">Page2</a>
<a href="/" class="button">Page3</a>
htmlcss

Answer №1

One neat trick you can use is the .button + .button rule, which adds a left margin when one button follows another. Check out this example:

.button {
    width: calc(80% / 3);
    height: max-content;
    background: white;
    -webkit-box-shadow: 0 8px 6px 10px black;
    -moz-box-shadow: 0 8px 6px 10px black;
    box-shadow: 0 8px 6px -1px grey;
    margin: auto;
    margin-top: 10px;
    float: left;
    margin: 0px;
    font-family: sans-serif;
    font-weight: 100;
    text-align: center;
    padding-top: 10px;
}

.button + .button {
    margin-left: calc(10%);
}
<a href="/" class="button">Page1</a>
<a href="/" class="button">Page2</a>
<a href="/" class="button">Page3</a>

In this setup, the three buttons each take up 80% of the parent container's width, and the leftover 20% is evenly distributed between the second and third buttons.

Answer №2

a {
  margin:12px;
}
<a href="/" class="button">Page1</a>
<a href="/" class="button">Page2</a>
<a href="/" class="button">Page3</a>

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 can you switch the display between two different class names using JavaScript?

I currently have a total of four filter buttons on my website, and I only want two of them to be visible at any given time. To achieve this, I labeled the first set of buttons as .switch1 and the second set as .switch2. Now, I've added a 'switch ...

javascripthtmlcsstoggleweb-frontend

Tips on personalizing buttons within Telerik form or Kendo form

Having recently started working with Telerik UI, I am struggling to customize a Kendo form in ASP.NET Razor Pages. Specifically, I am trying to rename a button but cannot locate the button field within the code. Despite following the guidelines provided in ...

c#htmlasp.net-mvc-3kendo-uitelerik-grid

Why does the video cover extend past its lower boundary in HTML?

I'm facing an issue where a purple cover over the <video> element extends slightly beyond the video's bottom border. Here's the code I'm using: .media-cover { display: inline-block; position: relative; } .media-cover:after ...

htmlcsshtml5-video

Numerous Selection Boxes

I came across this code snippet on the web. How can I insert the output into an email? Usually, I follow this format: $name = $_POST['name']; $email_body = "$name"; I want to incorporate the output of this code into my $email_body variable. Is ...

phphtmlformsemailcheckbox

How does using position: fixed affect width in React components?

Can someone explain why my sidebar width is reduced when I apply position: fixed? Here is the code snippet: https://codesandbox.io/s/1yr3nlqp74 Steps to reproduce the bug: Open the code in a new window (full screen) Observe the picture before and after ...

reactjscssreact-reduxmaterial-ui

Click on the image button within an anchor tag using Selenium

Can someone help me figure out how to select an Image Button that looks like the code below using Selenium in C#? I've attempted to find the element using Xpath. <a onclick="resetValues();UploadFile();" href="#"> <img alt="Upload Selected ...

c#htmlseleniumxpath

Having trouble with linking an external JavaScript file inside the head tag?

I've connected my script.js file to my index.html file, and both files are located in the same directory. I initially linked the script.js file in the <head> section, but it wasn't working as expected. Upon checking the console, I encounter ...

javascripthtmldom

Concealment Based on Surroundings

I'm currently working on implementing a new feature called 'context-based hiding' which involves hiding content based on mouse actions. I've been struggling to figure out how to create this feature and came across a website that has it ...

javascripthtmlcss

Tips for creating a background image that seamlessly adjusts to various computer screen sizes

I am trying to make sure that an image fills the entire browser window, but unfortunately it has fixed width and height dimensions. Is there a way to adjust this so it displays correctly on screens of different sizes? Can CSS be used to stretch the backg ...

htmlcss

Modifying the TITLE dynamically post header insertion: A guide

Is there a way to dynamically change the title of an HTML page based on the content included below the header section using PHP? For example: <html> <header><title>I would like to change</title></header> <!--CONTENT--> ...

phphtml

Creating space between flex items in Slick Carousel with Vue

This is my current Slick Carousel. There are 4 items in a row, and I am looking to insert some margin between each item while maintaining the existing aspect-ratio: 1.3/1; I'm struggling with overriding the classes from vue-slick-carousel. Does any ...

javascriptcssvue.jsvuejs2

Is it recommended to include the default declaration in the same stylesheet as the media queries?

In order to optimize my code structure, I placed the default declaration in the style.css file and kept all media queries separated in a stylesheet named enhanced.css. For instance, an example of a code snippet I have in the style.css looks like this: .b ...

cssmedia-queries

Applying CSS text-shadow to an input field can cause the shadow to be truncated

I've encountered an issue when applying text-shadow to an input field, where the shadow appears to clip around the text. Here is the CSS code I used: @import url('https://fonts.googleapis.com/css2?family=Jost:ital,wght@0,100..900;1,100..900& ...

cssinput-fieldtext-shadow

I want to create a feature in Angular where a specific header becomes sticky based on the user's scroll position on the

When working with Angular, I am faced with the challenge of making a panel header sticky based on the user's scroll position on the page. I have identified two potential solutions for achieving this functionality. One involves using pure CSS with pos ...

javascripthtmlcssangular

Adding custom fonts to DOMPDF: a step-by-step guide

First, I moved the dompdf library folder to /dompdf Next, I added a /fonts folder containing Roboto-Black.ttf Then, I created an index.php file <?php // Autoloader inclusion require_once 'dompdf/autoload.inc.php'; // Namespace reference ...

phpcssdompdf

What is the best way to divide a Modal Header column into two separate sections?

Is there a way to center the text in the Modal Header and have the H1 and P tags occupy one row each? Applying d-block to each creates two columns. I also tried increasing the Height in the Modal Header without success. If you have a solution, please hel ...

htmlcssbootstrap-5

How can I temporarily change an image when clicking on it using JavaScript?

I am working on an image section where I want to change the image for a few seconds when clicked and then revert back to the original image. Here is the code I have tried: <img src="contacticons.jpg" usemap="#image-map" id="imgName"> <a onclick ...

javascripthtmljqueryimageonclick

Including hyperlink tags within a CSS file

Can you create internal links within a CSS file, like inserting a table of contents at the top where you can click on an item and immediately jump to that section in the CSS file similar to an anchor tag? This feature would be extremely handy for long CSS ...

htmlcss

Certain images are not being retrieved by Express on Linux, although they are functioning properly on Windows

When using a template to display HTML code, everything works smoothly on Windows. However, when transferring the code to a Linux machine, an issue arises - "Cannot GET /SmallVacImages/1.jpg". It seems that the index.html file can load images from the publi ...

javascripthtmllinuxexpress

What is the best way to create a fullscreen div without using an iframe?

My website features various div elements acting as separate windows. However, when I remove these divs, the content no longer fits the entire page. I attempted to use CSS to make it full-page without using iframes, just with a simple <p>Test</p& ...

htmlcssiframe