How to change row elements to block elements in css

In CSS, you can use the display attribute to convert row elements into block elements. This attribute is used to specify the type of box that the element should generate. You only need to add the "display:block;" style to the row element. Can be changed to a block element.

The operating environment of this tutorial: Windows 7 system, CSS3&&HTML5 version, Dell G3 computer.

Row elements cannot be sized, such as span

Only block elements can be sized, such as div

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>

So convert row elements into block elements?

In CSS, row elements can be converted into block elements through display: block

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>

Recommended learning: CSS video tutorial

The above is the detailed content of How to change row elements to block elements in css. For more information, please follow other related articles on the PHP Chinese website!