Make the margin not clickable

user_12157836 0
Viewed 789

I'm very new to css, I can usually work stuff out using trial and error but this one has me stumped. I'm using a sprite page to show categories on my home page.

The html is 

<div id="sprite2">
    <a style="display:inline-block" href="https://www.subscriptionboxaustralia.com/product-category/adults-sex-toy-subscription-boxes/"><div class="sprite2" id="adults-boxes"></div></a>
    <a style="display:inline-block" href="https://www.subscriptionboxaustralia.com/product-category/arts-crafts-creative-subscription-boxes/"><div class="sprite2" id="arts-boxes"></div></a>
    </div>

And the css is

    .sprite2 {
    background-image: url(https://www.subscriptionboxaustralia.com/wp-content/themes/accesspress-store/images/Subscription-categories-spritesheet.png);
    background-repeat: no-repeat;
display:inline-block;

}

#adults-boxes {
    width: 425px;
    height: 49px;
    background-position: -15px -15px;
    margin-left: 120px
    }


#arts-boxes {
    width: 425px;
    height: 49px;
    background-position: -15px -94px;   
    margin-left: 70px
}

As you can see the margin around each image is clickable? How can I fix this, I've read a load of posts, but I can't seem to apply the concepts to my own code.

www.subscriptionboxaustralia.com

**UPDATE The first given answer works perfect for dekstop, thanks so much!!!! Only issue is now its throwing off my mobile styling 

@media (max-width: 480px) {
#adults-boxes {
    width: 425px;
    height: 49px;
    background-position: -15px -15px;
    transform: scale(.8);
    margin-left: -33px;}}

@media (min-width: 481px) {
#adults-boxes {
    width: 425px;
    height: 49px;
    background-position: -15px -15px;}}

Ive was using this to shrink the image for mobile, and the image was sitting to the right for some reason so i was using the -33px to have it sit at the left hand edge, now its pushed over to the right again? any ideas oh wise css yodas? =)

css-sprites css html
5 Answers

You have provided margin to child element sprite2 instead of that provide margin to you a tag which will give you margin but not clickable. Check snippet.

    .sprite2 {
    background-image: url(https://www.subscriptionboxaustralia.com/wp-content/themes/accesspress-store/images/Subscription-categories-spritesheet.png);
    background-repeat: no-repeat;
display:inline-block;

}

#adults-boxes {
    width: 425px;
    height: 49px;
    background-position: -15px -15px;
    }


#arts-boxes {
    width: 425px;
    height: 49px;
    background-position: -15px -94px;   
}
<div id="sprite2">
    <a style="display:inline-block; margin-left: 120px" href="https://www.subscriptionboxaustralia.com/product-category/adults-sex-toy-subscription-boxes/"><div class="sprite2" id="adults-boxes"></div></a>
    <a style="display:inline-block; margin-left: 70px;
" href="https://www.subscriptionboxaustralia.com/product-category/arts-crafts-creative-subscription-boxes/"><div class="sprite2" id="arts-boxes"></div></a>
    </div>

user_106839530

You're applying the margin to the boxes inside the a tags. So that will expand the content of the a tag, thus making the margin clickable. A solution to this would be to move the margin-left: 70px to a selector of the a class:

.sprite2 {
  background-image: url(https://www.subscriptionboxaustralia.com/wp-content/themes/accesspress-store/images/Subscription-categories-spritesheet.png);
  background-repeat: no-repeat;
  display:inline-block;
}

.sprite-link-adults {
  margin-left: 120px;
}

.sprite-link-arts {
  margin-left: 70px;
}

#adults-boxes {
  width: 425px;
  height: 49px;
  background-position: -15px -15px;
}


#arts-boxes {
  width: 425px;
  height: 49px;
  background-position: -15px -94px;
}
<div id="sprite2">
  <a class="sprite-link-adults" href="https://www.subscriptionboxaustralia.com/product-category/adults-sex-toy-subscription-boxes/">
    <div class="sprite2" id="adults-boxes"></div>
  </a>
  <a class="sprite-link-arts" href="https://www.subscriptionboxaustralia.com/product-category/arts-crafts-creative-subscription-boxes/">
    <div class="sprite2" id="arts-boxes"></div>
  </a>
</div>

user_35211080

I think the problem is your image as the background. The image isn't loading for me so I cant see it, but perhaps it could be overlapping. I have changed the image to be a background color, and the margin, though very small, is not clickable. Note: I have not changed the markup.

[Codepen][1]
user_69501000

You can change the HTML to this and it should work. Adjust height and width to match the size of the collision you need.

<div id="sprite2">
    <div class="sprite2" id="adults-boxes">
         <a style="width:424px; height: 49px; display:inline-block" href="#"></a>
    </div>
    <div class="sprite2" id="arts-boxes">
         <a style="width:424px; height: 49px; display:inline-block" href=""></a>
    </div>
</div>


.sprite2 {
    background-image: url(https://www.elegantthemes.com/blog/wp-content/uploads/2015/02/custom-trackable-short-url-feature.png);
    background-repeat: no-repeat;
display:inline-block;

}

#adults-boxes {
    width: 425px;
    height: 49px;
    background-position: -15px -15px;
    margin-left: 120px
    }


#arts-boxes {
    width: 425px;
    height: 49px;
    background-position: -15px -94px;   
    -margin-left: 70px
}
<div id="sprite2">
    <div class="sprite2" id="adults-boxes">
         <a style="height:49px; width:424px; display:inline-block" href="#"></a>
    </div>
    <div class="sprite2" id="arts-boxes">
         <a style="height:49px; width:424px; display:inline-block" href=""></a>
    </div>
</div>

user_113742960

Actually, Margin is not clickable, padding and border is, you can read it here. And as far as I know, this applies to all languages.

Now before we fix your problem, the clickable parts is the <a>'s part, so it is clickable, I think the div is the one you want to be click, in that case you either should decrease <a> height or increase <div> height.

It worked actually like this:

from <a style="display:inline-block"

to <a style="display:inline-block; height:0"

user_79283480
Related