How do I make the margin of my div unclickable?

Question

So I am currently learning how to use html and CSS and I decided to test myself with a very small project. When I finished I ran into a small problem that I don't know how to fix.
Here is my html
(Note: I am using jsfiddle.net so things like !DOCTYPE html and head aren't a concern)

div {
  width: 300px;
  background-color: rgb(255, 145, 145);
  border: 1px solid black;
  border-radius: 20px;
  font-size: 1.5em;
  margin: auto;
  padding: 2px
}
div:hover {
  background-color: rgb(255, 100, 100)
}
div:active {
  background-color: rgb(255, 75, 75);
}
a {
  text-decoration: none;
  color: rgb(145, 230, 255);
  font-family: serif, cursive;
  font-weight: bold;
}
span {
  color: red;
  font-family: Comic Sans MS;
}

<a href="#" target="_blank">
  <div>
    <p>
      When you click on it, this button will take you to<span>Codecademy</span>, where I learned how to make things like this.
    </p>
  </div>
</a>

The problem is that the margin of my divs are clickable and that is exactly what I don't want. Please also remember that I am a beginner so please explain why this is happening as simply as possible.

Are you positive your clicking the margin, or are you clicking the padding? — J. Allan, Nov 19 '16 at 23:15

score 2 · Answer 1 · answered Nov 19 '16 at 23:41

2

Rather than putting the margin and width on your div, put it on your a element and set it to block.

a {margin: 0px auto; width: 300px; display: block;}

answered Nov 19 '16 at 23:41

SEFL

539
4
15

score 2 · Answer 2 · answered Nov 19 '16 at 23:42

you should style the <a> instead the <div> and turn it it into a block.

a {
  display:block;
  width: 300px;
  background-color: rgb(255, 145, 145);
  border: 1px solid black;
  border-radius: 20px;
  font-size: 1.5em;
  margin: auto;
  padding: 2px
}
a:hover {
  background-color: rgb(255, 100, 100)
}
div:active {
  background-color: rgb(255, 75, 75);
}
a {
  text-decoration: none;
  color: rgb(145, 230, 255);
  font-family: serif, cursive;
  font-weight: bold;
}
span {
  color: red;
  font-family: Comic Sans MS;
}

<a href="#" target="_blank">
  <div>
    <p>
      When you click on it, this button will take you to<span>Codecademy</span>, where I learned how to make things like this.
    </p>
  </div>
</a>

Great minds think....similarly. ;) Upvoted because I suspect you were typing yours as I was typing mine. You can style either element as far as the border radius, color, etc. So both your answer and mine will work. — SEFL, Nov 19 '16 at 23:45

Alvaro · Answer 3 · 2017-05-22T21:00:43.880

You could assign a display: inline-block; or float: left; properties to the container link so it gets the size of it's children elements:

a {
  float: left;
}

div {
  width: 300px;
  background-color: rgb(255, 145, 145);
  border: 1px solid black;
  border-radius: 20px;
  font-size: 1.5em;
  margin: auto;
  padding: 2px
}
div:hover {
  background-color: rgb(255, 100, 100)
}
div:active {
  background-color: rgb(255, 75, 75);
}
a {
  margin:100px;
  float:left;
  text-decoration: none;
  color: rgb(145, 230, 255);
  font-family: serif, cursive;
  font-weight: bold;
}
span {
  color: red;
  font-family: Comic Sans MS;
}

<a href="https://www.codecademy.com/learn/web" target="_blank">
  <div>
    <p>
      When you click on it, this button will take you to<span>Codecademy</span>, where I learned how to make things like this.
    </p>
  </div>
</a>

How do I make the margin of my div unclickable?

3 Answers3