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

Struggling to create a flawless gradient fade transition

Looking to create a gradient overlay on my images for a specific effect: The goal is to have the gradient darker at the bottom, while leaving the top unaffected by the darkness. I attempted the following code: @include linear-gradient(to top, rgba(0,0,0 ...

csslinear-gradients

What is the determined method for calculating the pixel size of an SVG image?

Did you know that the Stackoverflow logo is actually an <a> element with a SVG image as its background? #hlogo a { text-indent: -999em; display: block; width: 200px; height: 50px; background-image: url("img/sprites.png?v=c4222387 ...

csssvg

"Introduce a time delay for the hover effect on the navigation dropdown

I've been struggling to find a way to add a delay to this hover effect. If you visit , you'll see a menu at the top that displays panels when hovered over. The CSS code to make them appear is: #navigation li:hover > .panel { display: blo ...

jquerycss

What is the best way to ensure one div expands to full width while simultaneously hiding another div on the page?

Hey there, I'm looking for a way to expand the width of a clicked div while making the other div disappear from the screen simultaneously. It should also be toggleable, so clicking the button again will shrink the div and bring back the other one. For ...

javascriptjqueryhtmlcss

"Implementing a full page refresh when interacting with a map using

Here is an example of how I display a map on the entire page: <div id="map_canvas"> </div> UPDATE 2: I have successfully displayed a menu on the map, but there is a problem. When I click on the button, the menu appears briefly and then disapp ...

javascriptjquerycsslinq

As my character slides off the moving platform in this exciting Javascript canvas game, my heart

Can anyone help me figure out how to keep my player on the moving platform? I'm not sure if I need to add gravity or something else. I'm still learning the ropes. export function checkTopCollision({ item1, item2 }) { return ( item1.y + item ...

javascripthtmlcanvas

Tips for creating an endless loop within a nested v-for in Vue?

Here is my attempt at solving the problem: HTML <ul class="tree"> <li> <span>First Node</span> <ul> <li v-for="(tree, i) in trees" :key="i"> <span v-text="tree. ...

javascripthtmlvue.js

Removing outlines on <p> <a> or <div> elements with Ionic and Angular seems to be a challenging task

Hey there, I’m currently working on my application which includes a login page. I've implemented a “Forgotten password ?” link, but no matter what I try, like using .class and :focus {outline: none}, I still see a yellow square around the item. ...

htmlcssangularionic-framework

Retrieve the HTML data and save it as page.html, displayed in a VueJS preview

After developing an innovative VueJS-based application for managing front-end content, I am now eager to enhance it with a 'download' button feature. This new functionality will allow users to easily download the previewed and edited content in H ...

javascripthtmlvue.js

I need to extract information from the source code of a different website - how can I do this

Is it possible to extract content from the source code of another website and display it on our own site? For example, imagine a scenario where a site contains the following source code: <table ...> <tr> <td class ...

htmlcopy

Automatically insert content into a div following the execution of an AJAX delete function using jQuery

I've been working on a feature to display an auto-populated message in the results div when a user deletes the last item from their favorites list, indicating that it is empty. However, I've hit a roadblock and can't seem to make it work. H ...

javascriptjqueryhtmlajax

Is there a specific code repository available that can verify and transform blog comments into XHTML strict format?

I'm currently developing a PHP website that allows users to make comments similar to a blog, and I am specifically interested in restricting the use of certain HTML tags. Is there any existing library that can process user comments and output valid XH ...

phpjavascripthtmlxhtmlcomments

What is the best way to set up pagination for my table?

I need assistance with implementing a searching functionality for my table using pagination. I believe JQuery will be necessary for this task. Can anyone recommend tutorials that may be helpful? My project is based on C# and MVC, so those resources could a ...

jqueryhtml

Is the PHP variable receiving a null value by the conclusion of the script?

I'm facing a puzzling issue that I just can't crack. Currently, I'm in the process of developing a blog and I've encountered an anomaly with a cookie-generated variable that holds a post ID. Strangely, when I reach the if(isset) stateme ...

phphtml

Creating tables in HTML is a useful skill to have. Follow these steps

I am looking to create a simple HTML table, and I have provided my code below: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content=" ...

htmlhtml-table

How feasible is it to customize the "ionic-img-viewer" npm package or replicate its image styling in Ionic 2?

I am wondering if it is possible to edit or add additional styles when my image is viewed using the "ionic-img-viewer" npm package. Alternatively, how can I apply the same styles as those on my original image tag? For example, here is my img tag with some ...

imagecssnpmionic2

What steps can be taken to reduce the size of the cards in ant.design?

Currently, I am using the ant.design Card component to present messages in a chat webapp built with react/redux. However, each card is displaying too much space around the text. Is there a way to adjust the card so that it wraps the text more closely? htt ...

cssreactjsantd

Issues with React JS and JavaScript filtering functionality not working correctly

I've been working on implementing a filter feature for a website, using an HTML range slider. However, I've encountered an issue where the values only update correctly when decreasing. For example, if I set the slider to $500, only products that ...

javascripthtmlreactjs

The progress bar for uploading a file is causing issues with the redirect function in the

I am currently facing an issue with my file submission form and progress bar in JavaScript. The progress bar is interfering with the controller, preventing it from redirecting back home with the link. I have tried removing window.location.href="/"; but thi ...

javascripthtmljqueryajaxlaravel

Ways to align one child to the end without affecting any other elements

I'm attempting to position only div3 at the flex-end of .app. If I use this code: .app { display: flex; flex-direction: column; height: 100vh; justify-content: flex-end; } Div3 goes where I want it, but everything else also moves dow ...

htmlcss