Как сделать маржу моего div незаметной?

Question

Итак, я в настоящее время изучаю, как использовать html и CSS, и я решил испытать себя с очень маленьким проектом. Когда я закончил, у меня возникла небольшая проблема, и я не знаю, как это исправить.
Вот мой HTML
(Примечание: Я использую jsfiddle.net так вещи, как DOCTYPE HTML и головы не относятся)

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>

Проблема заключается в том, что на полях из моих divs кликабельны, и это именно то, чего я не хочу. Пожалуйста, также помните, что я новичок, поэтому, пожалуйста, объясните, почему это происходит как можно проще.

Answer 1

Вы можете Назначьте display: inline-block; или float: left; свойства линии контейнера поэтому он получает размер из его дочерних элементов:

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

Вместо того, чтобы поместить запас и ширину на ваш div, наденьте его на свой элемент и установите его для блокировки.

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

Answer 3

вы должны стилизовать <a> вместо этого <div> и превратить его это в 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>