WEB/CSS

[CSS] ch04-02. margin

밍글링글링 2017. 8. 23.
728x90

02_margin.html

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>요안도라</title>
<link href="../css/02_margin.css" rel="stylesheet" type="text/css">
</head>

<body>
    <div class="container">
        <section>
            <h2>예약 방법 및 요금</h2>
            <div class="content1">
                <h3>예약 방법</h3>
                <p>요안도라 예약의 가장 빠른 방법은 인터넷 전화 070.4529.8743으로 직접 통화하시거나 문자를 남기시는
                    것입니다. 인터넷 전화라 시외전화 요금이 부과되지 않습니다.</p>
            </div>
            <div class="content2">
                <h3>예약 방법</h3>
                <p>요안도라 예약의 가장 빠른 방법은 인터넷 전화 070.4529.8743으로 직접 통화하시거나 문자를 남기시는
                    것입니다. 인터넷 전화라 시외전화 요금이 부과되지 않습니다.</p>
            </div>
            <div class="content3">
                <h3>예약 방법</h3>
                <p>요안도라 예약의 가장 빠른 방법은 인터넷 전화 070.4529.8743으로 직접 통화하시거나 문자를 남기시는
                    것입니다. 인터넷 전화라 시외전화 요금이 부과되지 않습니다.</p>
            </div>
        </section>
    </div>
</body>
</html>

 

02_margin.css

@CHARSET "UTF-8";
/*margin: 1개쓸경우 4방향 다 포함, 2개쓸경우 상하, 좌우, 4개쓸경우 복동남서 시계방향*/
.content1{
    border:1px solid black;
    background:lightyellow;
    padding:10px;
}
.content2{
    border:1px solid black;
    background:lightyellow;
    margin-bottom:10px;
    margin-left:50px;
    padding:10px 30px;
}
.content3{
    border:1px solid black;
    background:lightyellow;
    margin:20px 10px 0 100px;
    padding: 10px 30px 10px 50px;
}
 

728x90

'WEB > CSS' 카테고리의 다른 글

[CSS] ch04-04. border  (0) 2017.08.24
[CSS] ch04-03. border  (0) 2017.08.23
[CSS] ch04-01. width  (0) 2017.08.23
[CSS] ch03-10. grad  (0) 2017.08.23
[CSS] ch03-09. bgorigin  (0) 2017.08.23

댓글