본문 바로가기
HTML CSS

KokoaTalk Clone Coding: CSS blocks and lnlines

by jane.dev 2021. 5. 2.
반응형

Inline: They allow anything next to them.(in the same line, etc. span, a, image)

Block: They don't.(do not have height, width)

 

<head>

    <style>

      div {

         height: 100px;

         width: 100px;

         background-color: thistle;

       }

      span {

         background-color: skyblue;

       }

    </style>

</head>

<body>

    <div></div>

    <div></div>

    <div></div>

    <span>Hello!</span>

    <span>Hello!</span>

    <span>Hello!</span>

</body>

block(div)-inline(span)

 

<head>

    <style>

      div {

         height: 100px;

         width: 100px;

         background-color: thistle;

       }

      span {

         display: block;

         background-color: skyblue;

       }

    </style>

</head>

<body>

    <div></div>

    <div></div>

    <div></div>

    <span>Hello!</span>

    <span>Hello!</span>

    <span>Hello!</span>

</body>

inline->block