Jam's story

[CSS] margin 본문

WEB/CSS

[CSS] margin

애플쩀 2022. 5. 20. 11:44
여백(margine) 
  •  테두리(border) 외부의 요소 주위 공간을 만든 것 : 여백
  • margin-top/margin-right/margin-bottom/margin-left
  • 위를 줄여 margin으로 사용 가능
  • margin 값 - auto, px, pt.cm 등등, %,(백분율 단위로 사용가능 )-  inherit(상속), 음수값을 사용할 수 있다.
  • margin: 0 auto(); 가운데정렬
  • 어떤 요소에 bottom,  그 아래에 top이 잡힌다면 , margin값이 합쳐지지 않는다. 
    • 예를들어 첫번째div.bottom여백이 75px, 두번째div.top여백이 25px 이라면 
    •  여백이 75+25가 아닌 75px 이다. 
  • margin 약식: 
    • 4가지요소 :  시계방향대로 돌아간다. top -> right -> bottom ->left 
    • 2가지 요소만 적을시에는 위아래/ 왼쪽오른쪽 
      • margin : 0 15px -> 위아래는 0px, 왼쪽 오른쪽은 15px;
    • 3가지 요소를 적었을때는 top , left/light  , bottom

 

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<link rel="shortcut icon" type="image/x-icon" href="../images/SiSt.ico">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style type="text/css">
body{margin:0; padding:0; 
/* 바짝 붙이기 위해  */
}
div{border:1px solid black; 
/* border을 알아야 여백을 알기때문에 주었다.  */
margin-top:25px;
margin-right: 50px;
margin-bottom: 75px;
margin-left:100px;
}

p{
border:1px dotted pink;
margin:15px 50px 100px;
}
.d1 {
border:1px dotted aqua;
margin:15px 25px 50px 75px;

}
</style>
</head>
<body>
<h3>margin</h3>
<pre>
 테두리(border) 외부의 요소 주위 공간을 만든 것 : 여백
margin-top/margin-right/margin-bottom/margin-left
위를 줄여 margin으로 사용 가능
margin 값 - auto, px, pt.cm 등등, %,(백분율 단위로 사용가능 )-  inherit(상속), 음수값을 사용할 수 있다.
margin: 0 auto(); 가운데정렬

</pre>
<div>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dolore dolores sapiente rerum totam sed blanditiis. Rerum quibusdam voluptate alias dolores nemo quia velit accusantium repudiandae quam placeat iure hic nisi.</div>
<div>Nulla neque modi totam voluptatum delectus culpa in commodi nisi a magni ipsum quae at. Vero eos voluptas sequi molestias porro repudiandae sapiente assumenda animi impedit facere ipsa error neque!</div>
<div>Nesciunt fugit quis cumque neque quod beatae vitae perferendis voluptatibus quia eaque voluptates odio. Eveniet dolorum maxime rem quis ipsa illo dolores quia aspernatur et perferendis optio saepe quo nulla!</div>
<hr>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Perspiciatis quibusdam vel est ipsam laboriosam similique impedit doloribus at delectus rem cum dignissimos sunt mollitia quam quidem ipsum distinctio dolor incidunt?</p>
<p>Deserunt quos a eum laborum quas eos nemo reprehenderit doloribus architecto repellat molestias quis beatae amet fugiat laboriosam ipsa illum consectetur quo quae sit officia ducimus dolorem. Sunt voluptate laboriosam.</p>
<p>Hic saepe aspernatur porro totam recusandae delectus eaque aut voluptatem quasi error ipsum distinctio perferendis non nam eveniet necessitatibus quas exercitationem inventore fugiat adipisci! Doloremque mollitia vel eaque laudantium dolorem!</p>
<hr>
<br>
<p  class="d1">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Perspiciatis quibusdam vel est ipsam laboriosam similique impedit doloribus at delectus rem cum dignissimos sunt mollitia quam quidem ipsum distinctio dolor incidunt?</p>
<p  class="d1">Deserunt quos a eum laborum quas eos nemo reprehenderit doloribus architecto repellat molestias quis beatae amet fugiat laboriosam ipsa illum consectetur quo quae sit officia ducimus dolorem. Sunt voluptate laboriosam.</p>
<p  class="d1">Hic saepe aspernatur porro totam recusandae delectus eaque aut voluptatem quasi error ipsum distinctio perferendis non nam eveniet necessitatibus quas exercitationem inventore fugiat adipisci! Doloremque mollitia vel eaque laudantium dolorem!</p>

</body>
</html>

저작자표시 (새창열림)

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

[CSS] padding (안쪽여백 ) & width 속성  (0) 2022.05.20
[CSS] inherit (상속)  (0) 2022.05.20
[CSS] border -css 테두리  (0) 2022.05.20
[CSS] 배경  (0) 2022.05.20
[CSS] 색상  (0) 2022.05.20
'WEB/CSS' Related Articles more
Comments