Wie mache ich den Rand meiner div unclickable?

Question

Also lerne ich gerade, wie man html und CSS benutzt und ich beschloss, mich mit einem sehr kleinen Projekt zu testen. Als ich fertig war, stieß ich auf ein kleines Problem, das ich nicht zu beheben weiß.
Hier ist mein html
(Anmerkung: Ich bin mit jsfiddle.net so Dinge wie DOCTYPE html und Kopf kein Problem sind)

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>

Das Problem, dass die Marge meiner divs sind anklickbar und das ist genau das, was ich nicht will. Bitte denken Sie auch daran, dass ich ein Anfänger bin, also erklären Sie bitte, warum dies so einfach wie möglich geschieht.

Answer 1

Sie konnten display: inline-block; oder float: left; Eigenschaften zum Container Link zuweisen, damit es die Größe ist es Elemente Kinder bekommt:

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>

Answer 2

Anstatt den Rand setzen und Breite auf Dein div, setze es auf dein a-Element und setze es zum Blockieren.

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

Answer 3

sollten Sie die <a> stattdessen die <div> und drehen Sie es Stil in sie ein 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>