CSS Margin attribute[top, left, bottom, right]
[SOURCE VIEW]
<![CDATA[
<style type = "text/css">
#relative
{
width:350px;
height:300px;
background-color:#99cc00;
position:relative;
top:0px;
left:150px;
}
#mydiv
{
width:150px;
height:300px;
float:left;
text-align:right;
valign:middle;
font-weight:bold;
}
#mydiv2
{
width:150px;
height:300px;
float:right;
text-align:left;
valign:middle;
font-weight:bold;
}
#con_div, #pad_div, #bor_div, #mar_div
{
text-align:center;
position:absolute;
}
#con_div
{
width:200px;
height:50px;
border:1px solid blue;
background-color:lightgreen;
top:125px;
left:75px;
z-index:4;
}
#pad_div
{
width:250px;
height:150px;
border:2px dashed blue;
background-color:yellow;
top:75px;
left:50px;
z-index:3;
}
#bor_div
{
width:300px;
height:250px;
border:2px dotted blue;
background-color:red;
top:25px;
left:25px;
z-index:2;
}
#mar_div
{
width:350px;
height:300px;
border:2px solid blue;
background-color:gray;
top:0px;
left:0px;
z-index:1;
}
#myhrcon
{
width:50px;
border:1px solid blue;
}
#myhrpad
{
width:50px;
border:2px dashed blue;
}
#myhrbor
{
width:50px;
border:2px dotted blue;
}
#myhrmar
{
width:50px;
border:2px solid blue;
}
#margin0
{
width:120px;
height:120px;
border:1px solid blue;
}
#margin1
{
width:100px;
height:100px;
border:1px solid blue;
margin:5px 10px 15px 0px;
}
#margin2
{
width:100px;
height:100px;
border:1px solid blue;
margin:5px;
}
#margin3
{
width:100px;
height:100px;
border:1px solid blue;
margin:5px 10px 0px;
}
#margin4
{
width:100px;
height:100px;
border:1px solid blue;
margin:5px 10px;
}
</style>
<h1>CSS Margin attribute[top, left, bottom, right]</h1>
<br />
<h2>content, padding, border, margin 들의 관계 </h2>
<br />
<div id="mdiv">
<p>content <span id="mspan1"> 본문내용(접시에 담긴 음식과 같음)</span></p>
<p>padding<span id="mspan1"> content와 border사이의 여백(음식과 접시 바깥 끝과의 거리 )</span></p>
<p>border <span id="mspan1"> padding을 감싸고 있는 선 (접시의 바깥 끝)</span></p>
<p><span id="mspan1"> 선을 그리지 않을 수도 있이며 두께등 다양하게 그릴수 있다.</span></p>
<p>margin<span id="mspan1"> border와border의 여백(접시와 다른접시의 간격)</span></p>
</div>
<br />
<div style="text-align:center;font-weight:bold;">top</div>
<div id="mydiv"><br /><br /><br /><br /><br /><br />
left </div>
<div id="mydiv2"><br /><br /><br /><br /><br /><br />
right </div>
<div id="relative">
<div id="con_div">
content
</div>
<div id="pad_div">
padding
</div>
<div id="bor_div">
border
</div>
<div id="mar_div">
margin
</div>
</div>
<div style="text-align:center;font-weight:bold;">bottom</div>
<div style="width:150px;display:table-row;">
<div style="width:150px;display:table-cell;"></div>
<div style="width:150px;display:table-cell"><hr id="myhrcon"></div>
<div style="width:150px;display:table-cell">content edge</div>
<div style="width:150px;display:table-cell"></div>
</div>
<div style="width:150px;display:table-row;">
<div style="width:150px;display:table-cell;"></div>
<div style="width:150px;display:table-cell"><hr id="myhrpad"></div>
<div style="width:150px;display:table-cell">padding edge</div>
<div style="width:150px;display:table-cell"></div>
</div>
<div style="width:150px;display:table-row;">
<div style="width:150px;display:table-cell;"></div>
<div style="width:150px;display:table-cell"><hr id="myhrbor"></div>
<div style="width:150px;display:table-cell">border edge</div>
<div style="width:150px;display:table-cell"></div>
</div>
<div style="width:150px;display:table-row;">
<div style="width:150px;display:table-cell;"></div>
<div style="width:150px;display:table-cell"><hr id="myhrmar"></div>
<div style="width:150px;display:table-cell">margin edge</div>
<div style="width:150px;display:table-cell"></div>
</div><br />
<h2>How to use <span id="mspanred">Margin</span> </h2>
<br />
순서를 잘 기억해야한다.단위는 px, cm, % 음수값도 지정 가능하다
<div id="mdiv">
<p>margin-top<span id="mspan1"> 상단 여백</span></p>
<p>margin-right<span id="mspan1"> 우측 여백</span></p>
<p>margin-bottom<span id="mspan1"> 하단 여백</span></p>
<p>margin-left<span id="mspan1"> 좌측 여백</span></p>
</div>
<div style="width:150px;height:150px;display:table-cell;">
<p>margin:5px 10px <br />15px 0px;</p>
<div id="margin0">
<div id="margin1">
content
</div>
</div>
</div>
<div style="width:150px;height:150px;display:table-cell;">
<p>margin:<br />5px;</p>
<div id="margin0">
<div id="margin2">
content
</div>
</div>
</div>
<div style="width:150px;height:150px;display:table-cell;">
<p>margin:5px 10px <br />0px;</p>
<div id="margin0">
<div id="margin3">
content
</div>
</div>
</div>
<div style="width:150px;height:150px;display:table-cell;">
<p>margin:<br />5px 10px ;</p>
<div id="margin0">
<div id="margin4">
content
</div>
</div>
</div>
]]>
content, padding, border, margin 들의 관계
content 본문내용(접시에 담긴 음식과 같음)
padding content와 border사이의 여백(음식과 접시 바깥 끝과의 거리 )
border padding을 감싸고 있는 선 (접시의 바깥 끝)
선을 그리지 않을 수도 있이며 두께등 다양하게 그릴수 있다.
margin border와border의 여백(접시와 다른접시의 간격)
top
left
right
content
padding
border
margin
bottom
How to use Margin
순서를 잘 기억해야한다.단위는 px, cm, % 음수값도 지정 가능하다
margin-top 상단 여백
margin-right 우측 여백
margin-bottom 하단 여백
margin-left 좌측 여백
margin:5px 10px
15px 0px;
댓글