Search code examples
csshandlebars.js

How can i move the border with the text or close to it i need the left to move in 30px


I need to move the border with the text. The padding only moves the text not the border

 {{#each spacing}}
  <span class='p-2'>
  {{business}} ({{Count}})
  </span>
 {{/each}}

 .p-2{
  border: 1px solid #D8DADA;
  margin: 0 12px 0 0;
  padding: 10px 0 8px 30px !important;  
  }

Span


Solution

  • If I understand you correctly, you are trying to move the button elements in their entirety, and not just their contents. I'm assuming you want to move them to the right.

    To do this, wrap the contents of the buttons in a div, and give that div margin-left:30px.

    CSS

         .button-container {
             margin-left:30px;
         }
    
         .p-2{
              border: 1px solid #D8DADA;
              margin: 0 12px 0 0;
              padding: 15px 0 8px 15px !important;  
          }
    
    

    HTML

        <div class='button-container'>
            <button class='p-2'></button>
            <!-- and so on.. --->
        </div>