display: block;を指定してもaタグが親要素いっぱいに広がらない

前提・実現したいこと

aタグのクリック範囲を親要素いっぱいにしたいのですがうまくいきません。
!明](e3e4eafbf0d255eeef91c0fb68e9a21d.gif)

該当のソースコード

    <div class="a">
        <a href="">ここをクリック</a>
    </div>

.a{
  background-color: #da6b64;
  border-radius: 100vw;
  padding: 0 40px;
  height: 100px; 
};

.a a{
  display: block;
}

試したこと

aタグにdisplay: block;を指定
aタグのheight: 100%;

上記の２つをためしましたがだめでした。
display: block;が正しくしていされていないのでしょうか？

###追記

コード（修正後）

.a{
  background-color: #da6b64;
  border-radius: 100vw;
  padding: 0 40px;
  height: 100px; 
}

 .a a{
  display: block;
  margin-top: 100px;
}

状態　
aタグの「ここをクリック」の位置が変わるのではなく、親要素にmargin-topが効いている

###追記２

実現したいこと

このように、クリック範囲が親要素いっぱいに広がっているようにしたいです。（現状は、テキストの部分のみ）

現状の状態

aタグにheight: 100%;を指定したところ、このようになりました。白色のところまでクリック範囲が拡大させれましたが、角が丸くなっているところまで、子要素のが広がっていないのが今の問題です。
これは、子要素にも親要素と同じように、border-radiusを指定するして合わせにいくしかないのでしょうか？

行動規範の内容に同意します

回答1件

ベストアンサー

css
1};
2
3.a a{

引用内の ; を削除してください。; .a a というセレクタを指定したことになっているため、無視されています。

追記について

div と a の2つの要素を使うほうが面倒なので、a だけで実現してはどうでしょうか。

html
1<style>
2.a {
3  display: block;
4  background-color: #da6b64;
5  border-radius: 100vw;
6  height: 100px;
7  line-height: 100px;
8  text-align: center;
9}
10</style>
11<a href="" class="a">ここをクリック</a>

2つの要素のままだと以下です。

html
1<style>
2.a {
3  background-color: #da6b64;
4  border-radius: 100vw;
5  height: 100px;
6  overflow: hidden;
7}
8
9.a a {
10  display: block;
11  height: 100%;
12  text-align: center;
13  line-height: 100px; // .aの高さに合わせる
14}
15</style>
16<div class="a">
17<a href="">ここをクリック</a>
18</div>

投稿2021/03/31 16:01

編集2021/04/01 14:49

int32_t

総合スコア20872

M_Ren

2021/04/01 11:15

コメントありがとうございます。コメントしていただいたことを試してみましたがうまくいきませんでした。 aタグにdisplay: block;が効いていないのだと思い、aタグにmargin-topをつけてみました。（margin上下はブロック要素にしか適応されないため）。すると、aタグの一が変わるのではなく、その親要素にmargin-topが効いていました。cssで正しく、aタグに指定ができていないのでしょうか？現状のコードと、今の状態を追記しますので、どうか確認よろしくお願いします。

int32_t

2021/04/01 12:19

ブロックになっていれば height:100% なども効きますよ。試しに <a> に background:whiteなどを指定して確認してみてください。縦方向の位置を特定の値で指定したいのですか? それとも縦方向も親の高さいっぱいにしたいのですか? また、テキストの縦位置や横位置も中央にしたかったりしますか?

M_Ren

2021/04/01 12:41

コメントありがとうございます。 background-colorを入れてheight: 100%;を指定したところ、縦方向いっぱいに要素が広がっていました。ですが、ボタンを角を丸くしているため、aタグの要素がその丸のところまで行かないのです。実現したいこととしては、親要素の中央にテキストを配置して、クリック範囲を親要素いっぱいに広げたいです。たびたび申し訳ありませんが、また今の状態を追記しますので確認のほどよろしくお願いします。

int32_t

2021/04/01 14:49

回答に追加しました。

M_Ren

2021/04/01 15:54

無事できました！わざわざ二通りのパターンまで本当にありがとうございます！最後まで付き合っていただいてありがとうございます。確かに、divタグを使ってふたつの要素で構築する必要はありませんでした；；

行動規範の内容に同意します