css 박스 모델

HTML 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>



'HTML' 카테고리의 다른 글

img 태그에 alt 속성  (0) 2015.09.16
css active 속성 메뉴바 탭키  (0) 2015.09.11
컨테이너 안에서 자유롭게 위치 잡기  (0) 2015.09.06
css 레이아웃 position  (0) 2015.09.06
css 선택자  (0) 2015.09.06
Posted by 이상욱1
,