마진겹침 현상


결과물


글사이에 20px의 margin을 둔 예제

생활코딩 1

생활코딩 2

마진겹침이 일어나는 현상

생활코딩 3


<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="desc" content="생활코딩의 소개자료">
    <title>Title</title>
    <style type="text/css">
        body{border:1px solid blue;}
        p {
            margin:20px;
            border:1px solid red;
        }

    </style>
</head>
<body>
글사이에 20px의 margin을 둔 예제

<p> 생활코딩 1 </p>
<p> 생활코딩 2 </p>
마진겹침이 일어나는 현상
<p> 생활코딩 3 </p>

</body>
</html>