HTML

css 박스 모델

이상욱1 2015. 9. 6. 17:19

  top 

margin

border 

padding 

content 


하나의 엘리먼트는 하나의 box(상자) 로 공간이 구성됩니다 

콘텐츠 - 엘리먼트 상이에 있는 텍스트나 이미자 표시됩니다. 

주의 할점은 모든 엘리먼트는 width 와 height 속성을 가지는데  이속성을 통해서 설정한 너비와 높이 값은 컨텐츠의 영역만 해당됩니다.


<!doctype html>

<html>

<head>

<meta charset="utf-8">

<title> 시작</title>

<style type ="text/css">

*{

margin:0px;

padding:0px;

}


#content{

  position:relative;

width:300px;

text-align:center;

padding-top:1em;

padding-bottom:1em;

border:2px solid red;

margin:.5em;

}



.title1{

font-size:14px;

font-weight:bold;

}


#logo{

margin-right:auto;

margin-left:auto;

}



</style>

</head>


<body>

<div id="content">

    <p class="title1"> 무엇이 당신의 차별화 전략인가요?</p>

    <img id="logo" src="../../Users/Administrator/Downloads/saddfs.gif" />

  

    </div>


</body>

</html>