[CSS 기초이론] - 박스모델 Box-Model (border, margin, padding)

HTML, CSS

[CSS 기초이론] - 박스모델 Box-Model (border, margin, padding)

일등하이 2021. 1. 12. 22:49

www.youtube.com/watch?v=xZthulc94G8&t=1028s

<!DOCTYPE html>
<html lang="kr">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        body{
            margin: 0;
        }
        h1 {
            width: 200px;
            height: 50px;
            padding: 20px; 
            margin: 20px;

            /* border-width: 2px;
            border-color: red;
            border-style: solid; */

            border: 5px solid red; 

            /* border-top: 2px solid red;
            border-bottom: 2px solid red; */

            outline: 5px solid blue;
            outline-offset: -10px;

        }
    </style>
</head>
<body>
    <h1>Hello, World</h1>
</body>
</html>