HTML CSS

KokoaTalk Clone Coding: margin, padding

jane.dev 2021. 5. 3. 10:19
반응형

<head>

    <style>

        body {

            margin: 20px;

        }

        span {

            background-color: teal;

        }

    </style>

</head>

<body>

    <span>Hello!</span>

    <span>Hello!</span>

</body>

span

 

<head>

    <style>

        body {

            margin: 20px;

        }

        span {

            background-color: teal;

            padding: 20px;

            margin: 30px;

        }

    </style>

</head>

<body>

    <span>Hello!</span>

    <span>Hello!</span>

</body>

span-padding, margin
span-padding
padding: 20px

 

span-margin
margin: 30px

Inline(ex.span) do not have height, width. So they have a padding everywhere but only have margin left, right. 

inline->block, inline can have margin top, bottom.