aタグのdisplayが変わった

aタグにdisplay:inline-block;を設定していないのにwidthやheightを設定できました
親要素にdisplay:flex;を設定しているのが原因なのでしょうか　調べても情報が出てきませんでした

HTML
1<!DOCTYPE html>
2<html lang="ja">
3  <head>
4    <meta charset="utf-8">
5    <title>isara模写</title>
6    <link rel="stylesheet" href="css/isara.css">
7    <link rel="stylesheet" href="css/reset.css">
8  </head>
9<div class="contact-page">
10      <p class="contact-p teian">まずは２０日間で、<br>月１０万円稼げるスキルを手にいれよう。</p>
11      <p class="marker contact-p">※受講料金は実質０円です。詳しくは資料請求をどうぞ。</p>
12      <a href="#">お問い合わせ＆資料請求はこちら</a>
13      <p class="contact-p simekiri">第６期生：2019年11月25日 ~ 2019年12月14日＊締め切りました</p>
14      <p class="contact-p simekiri">第７期生：2020年2月17日 ~ 2020年3月7日＊締め切りました</p>
15      <p class="contact-p simekiri">第8期生：2021年内に開催予定＊資料請求受付中です</p>
16       
17    </div>

CSS
1@charset "UTF-8";
2html{
3  font-size:62.5%;
4}
5*,*::before,*::after{
6  box-sizing:border-box;
7}
8body {
9  font-family: "Helvetica Neue",Arial,"Hiragino Kaku Gothic ProN","Hiragino Sans",Meiryo,sans-serif;
10  margin:0px;
11}
12h1,h2,h3,h4,h5,h6{margin:0px;}
13a{text-decoration:none;}
14.contact-page{height:600px; background-color:#EBB94D; display:flex; flex-direction:column; align-items:center;
15   padding-top:35px; text-align: center;}
16 .contact-p{font-weight:bold; font-size:1.3rem; color:white; line-height:1.5;}
17 .marker{background-color:white; color:#c7254e; display:inline-block; font-size:1.1rem; letter-spacing:2px;
18 border-radius:4px; margin-bottom:45px;}
19 .teian{margin-bottom:15px;}
20 .contact-page a{font-size:1.6rem; background-color:#d84940; opacity:0.8;  color:white;
21 font-weight:bold; border-radius:45px;  width:1030px; height:105px; line-height: 105px; margin-bottom:70px;}
22 .contact-page a:hover{opacity:1;} .simekiri{letter-spacing:2px; font-size:1.4rem; margin-bottom:35px;}
23

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

回答1件

ベストアンサー

フレックスアイテムのdisplay値は、自動的にブロック化されます。

Flex Items

If the computed display value of an element’s nearest ancestor element (skipping display:contents ancestors) is flex or inline-flex, the element’s own display value is blockified.

投稿2021/02/15 15:01