이번시간에는 padding과 margin의 값을 비교해보려합니다.
html공부 점점 재밌어지지않나요?? ㅋㅋㅋ
사실... 이런것보다.. 언넝 홈페이지를 꾸미고 싶은데..!!!!
더 열심히해서 꼭 만들자구요!!
다들 파이팅합시다!!
<html>
<head>
<title></title>
<style type="text/css">
*{margin:0; padding:0;}
#box1{background: yellow; width:200px; height:100px; border:5px solid #f00;}
#box2{background: green; width:200px; height:100px; border:5px dashed #0f0; padding:10px 10px;}
#box3{background: orange; width:200px; height:100px; border:5px solid #00f; margin:10px 10px;}
</style>
</head>
<body>
<div id="box1">박스1</div>
<div id="box2">박스2</div>
<div id="box3">박스3</div>
</body>
</html>
결과값입니다.
박스1은 padding, margin값을 주지않았습니다.
박스2는 padding값만 줬습니다.
박스3에는 margin값을 줬습니다.
어떻게 나타나지는지 비교가되네요 ^-^
다들 헷갈려하시지마시고!! 복습하시면서 확실하게 익히시길 바랍니다.
* 웹퍼블리셔 초급과정은 www.oraclejava.co.kr 에서 확인가능합니다. ^^
'웹표준 > HTML5 & CSS3' 카테고리의 다른 글
| html&css공부하기 [float,clear] (0) | 2015.03.12 |
|---|---|
| html&css공부하기 _ [dt, dd을 이용한 예제] (0) | 2015.03.11 |
| HTML&CSS공부하기 [글자태그복습] (0) | 2015.03.10 |
| html&css공부하기 (1) | 2015.03.09 |
| HTML5&CSS3 공부하기 글자색과 배경색 2 (0) | 2015.03.02 |