html &nbsp has symbol on spacing

I'm trying to have a paragraph tag in between two buttons with spacing. The small issue is the weird symbol when I add the " " command. I just need to take it out, or I'd like to know if there is an alternate way in adding space.

HTML:

<div class="col-md-12 text-align-center">
  <button type="submit" href="../cards" class="fb_btn registerbtn">LOGIN</button>
  <span class="color-gray small">&nbsp;&nbsp;&nbsp;or&nbsp;&nbsp;&nbsp;</span>
  <button type="submit" href="cards/register.php" class="fb_btn registerbtn">REGISTER</button>
  <p>to claim this coupon</p>
</div>

enter image description here

5 answers

  • answered 2018-11-08 06:43 Myco Claro

    Apply CSS Box Modeling and apply margin or padding instead of using &nbsp

    <style>
    button{
     margin: 10px;
    }
    </style>
    
    <div class="col-md-12 text-align-center">
      <button type="submit" href="../cards" class="fb_btn registerbtn">LOGIN</button>
      <span class="color-gray small">or</span>
      <button type="submit" href="cards/register.php" class="fb_btn registerbtn">REGISTER</button>
      <p>to claim this coupon</p>
    </div>

  • answered 2018-11-08 06:44 Selvam

    Suggest you to use padding (left & right) instead of space(&nbsp;). Check out the preview at https://jsfiddle.net/jwe8h49z/9/

  • answered 2018-11-08 06:46 richflow

    I don't see any grey marks with just your code and boostrap in this codepen. Seems like something else is going on?

    Also, as @Erik Philips suggested, a better way would be to use margins.

    Here's an example:

    <div class="col-md-12 text-align-center" >
        <button type="submit" href="../cards" class="fb_btn registerbtn" style="margin-right: 10px;">LOGIN</button>
        <span class="color-gray small">or</span>
        <button type="submit" href="cards/register.php" class="fb_btn registerbtn" style="margin-left: 10px;">REGISTER</button>
        <p>to claim this coupon</p>
    </div>

  • answered 2018-11-08 06:46 Sumesh TG

    .fb_btn{
      padding:5px;
      margin-right:5px;
      margin-left:5px;
    }
    <div class="col-md-12 text-align-center">
      <button type="submit" href="../cards" class="fb_btn registerbtn">LOGIN</button>
      <span class="color-gray small">or</span>
      <button type="submit" href="cards/register.php" class="fb_btn registerbtn">REGISTER</button>
      <p>to claim this coupon</p>
    </div>

    Use CSS to add spaces between controls.

  • answered 2018-11-08 06:52 Firoz

    This code will work for you --

    button{background:#f2901a; color:#fff; border:0; padding:15px; width:120px;}
    .color-gray{padding:0 20px; position:relative; }
    .color-gray::before{content:'---'; position:absolute; left:0px; top:0px;}
    .color-gray::after{content:'---'; position:absolute; right:0px; top:0px;}
    .text-align-center{text-align:center;}
    <div class="col-md-12 text-align-center">
      <button type="submit" href="../cards" class="fb_btn registerbtn">LOGIN</button>
      <span class="color-gray small">or</span>
      <button type="submit" href="cards/register.php" class="fb_btn registerbtn">REGISTER</button>
      <p>to claim this coupon</p>
    </div>