CSSで行要素をブロック要素に変更する方法-フロントエンドQ&A-php.cn

CSSで行要素をブロック要素に変更する方法

青灯夜游

リリース： 2023-01-07 11:47:13

オリジナル

4881 人が閲覧しました

CSS では、display 属性を使用して行要素をブロック要素に変換できます。この属性は、要素が生成するボックスのタイプを指定するために使用されます。「display:block;」を追加するだけです。 " スタイルを行要素に追加します。ブロック要素に変更できます。

CSSで行要素をブロック要素に変更する方法

このチュートリアルの動作環境: Windows 7 システム、CSS3&HTML5 バージョン、Dell G3 コンピューター。

span などの行要素のサイズは変更できません

div などのブロック要素のみサイズを変更できます

CSSで行要素をブロック要素に変更する方法

nbsp;html>



    <meta>
    <meta>
    <!-- <link rel="stylesheet" href="style.css">    -->
    <style>
       div {
           width: 100px;
           height: 100px;
           background-color: pink;
       }

        a {
           width: 100px;
           height: 100px;
           background-color: pink;
       }
    </style>



    <div>块元素</div>
    <a>行元素</a>

ログイン後にコピー

CSSで行要素をブロック要素に変更する方法

それでは、行要素をブロック要素に変換しますか?

CSS では、display: block

CSSで行要素をブロック要素に変更する方法

nbsp;html>



    <meta>
    <meta>
    <!-- <link rel="stylesheet" href="style.css">    -->
    <style>
        div {
            width: 100px;
            height: 100px;
            background-color: pink;
        }

        a {
            width: 100px;
            height: 100px;
            background-color: pink;
            display: block
        }
    </style>



    <div>块元素</div>
    <a>行元素</a>

ログイン後にコピー

CSSで行要素をブロック要素に変更する方法 # を通じて行要素をブロック要素に変換できます。