CODEWITHSUNDEEP
htmlcss
g rom
g rom

Reputation: 1

I would like have a little blank space between the 3 buttons

hello this is my code html and my css

background-color: #4CAF50; /* Green */
      border: none;
      color: black;
      text-align: center;
      text-decoration: none;
    
      font-size: 14px;
    
      float:left;
    
      }

    .button2 {
     background-color: orange; /* Green */
     border: none;
     color:black;
     text-align: center;
     text-decoration: none;
    
     font-size: 14px;
    
     float:left;

     }

    .button3 {
     background-color: orangered; /* Green */
     border: none;
     color: white;
     text-align: center;
     text-decoration: none;
 
    font-size: 14px;
    float:left;
}
<div class="grid-container">
    <div class="grid-item">
    <h4><strong>Wecandoo</strong></h4>
    <p style="text-align: left;"><a href="https://la-box-cadeau.com/wecandoo/"><img 
    class="size-medium wp-image-28876 alignleft" src="https://la-box-cadeau.com/wp- 
    content/uploads/2021/10/wecandoo-03-130x130-1.jpg" alt="box cadeau wecandoo" 
    width="100" height="100" /></a>Un site qui répertorie les meilleurs artisans qui 
    proposent des ateliers découverte autour de chez vous</p>

    <div><a class="button" href="https://wecandoo.fr/#ae432">Site de la box </a> <a 
    class="button2" href="https://www.w3docs.com/">Box bières</a><a class="button3" 
    href="https://la-box-cadeau.com/wecandoo/">En savoir plus </a></div>
    <strong>Box a partir de : 19,99</strong>

</div>

My problem is i would like to have a little space like 15 px between each button and all stay in the same line. I tried with margin but this no works like the expectation

I join also a screen shot how is the site now thank you for read this and I hope someone can help me [enter image description here][1]

[1]: https://i.sstatic.net/EZZ2Z.png

Upvotes: 0

Views: 76

Answers (1)

A Haworth
A Haworth

Reputation: 36664

You really want the whole anchor element to have a margin so the boxes get separated out. You say you have tried this and 'it didn't work' I can't say why but this snippet gives a margin to each box and it works OK on the floated elements.

The margin has been distributed between right and left so there is a bit of symmetry. You could just put it on the right and take it off on the last box if it's not wanted there instead.

Note that float is really used for positioning an element around which you want, for example, other text to wrap around it - often used to position an img within text. You may like to investigate inline-block for putting elements side by side where no wrapping will ever be required (if that is the case in your system).

.button {
  /* added for demo so the boxes have some height and fixed dimensions */
  position: relative;
  height: 100px;
  width: 100px;
  margin: 0 7.5px 0 7.5px;
  border: none;
  color: black;
  text-align: center;
  text-decoration: none;
  font-size: 14px;
  float: left;
}

.button1 {
  background-color: #4CAF50;
  /* Green */
}

.button2 {
  background-color: orange;
}

.button3 {
  background-color: orangered;
}
<div class="grid-container">
  <div class="grid-item">
    <h4><strong>Wecandoo</strong></h4>
    <p style="text-align: left;">
      <a href="https://la-box-cadeau.com/wecandoo/">
        <img class="size-medium wp-image-28876 alignleft" src="https://la-box-cadeau.com/wp- 
content/uploads/2021/10/wecandoo-03-130x130-1.jpg" alt="box cadeau wecandoo" width="100" height="100" />
      </a>
      Un site qui répertorie les meilleurs artisans qui proposent des ateliers découverte autour de chez vous
    </p>

    <div>
      <a class="button button1" href="https://wecandoo.fr/#ae432">Site de la box
      </a>
      <a class="button button2" href="https://www.w3docs.com/">Box bières</a>
      <a class="button button3" href="https://la-box-cadeau.com/wecandoo/">En savoir plus </a>
    </div>
    <strong>Box a partir de : 19,99</strong>

Note also that the CSS has been tidied up a bit by putting all the common styling for the buttons into one class and just adding the differences (the background color in this case) in the separate button classes.

Upvotes: 2

Related Questions