divのマージンを解除できないようにするにはどうすればよいですか？

Question

私は現在htmlとCSSの使い方を学んでおり、非常に小さなプロジェクトで自分自身をテストすることにしました。私が終わったとき、私は小さな問題に遭遇しましたが、私はどのように修正するか分かりません。問題は余裕ということです

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>

：ここ
は私のhtml
（DOCTYPE htmlとヘッドのようなものな関心事ではありませんので、私はjsfiddle.netを使用しています！注）であります私の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>