• 회원가입
  • 로그인
  • 구글아이디로 로그인

[box] CSS - margin-top 속성 - 바깥여백상단 (= margin-top속성 = 마진탑속성 = 마진톱속성)

margin-top 예제

 

<style>

div { border:1px solid blue;}

h1 { border:1px solid red; margin-top:200px;}

p { border:1px solid green;}

</style>


<div>

<h1>margin-top : 상단 여백</h1>

<p>홈짱닷컴 Homzzang.com</p>

</div>



결과 보기

※ 주의
요소 자체의 브라우저 margin 내장값에 의해 h1 과 p 요소 사이에 여백이 있음.

→ h1과 p 사이의 여백 제거하려면, h1 요소에 margin-bottom:0 , p 요소에 margin-top:0줘야함.

 

방문 감사합니다. (즐겨찾기 등록: Ctrl + D)

분류 제목
animation CSS - animation-direction 속성 - 애니방향 (= 움직임방향 = 애니메이션디렉션속성, I…
animation CSS - animation-duration 속성 - 애니지속시간 (= 애니완료소요시간 = 움직임완료소요시간…
animation CSS - animation-fill-mode 속성 - 애니미작동스타일 (= 움직임 작동안할때 스타일 = 애…
animation CSS - animation-iteration-count 속성 - 애니반복횟수 (= 움직임반복횟수, IE10…
animation CSS - animation-name 속성 - 키프레임명 (= 키프레임이름 = 애니이름 = 애니명 = 애니메…
animation CSS - animation-play-state 속성 - 애니재생상태 (= 애니작동상태설정 = 움직임 재생/…
animation CSS - animation-timing-function 속성 - 애니재생중속도변화 (= 움직임 중 속도변경…
image CSS - Rounded Images (둥근/동그란 이미지 만들기 = 이미지 테두리 둥글게/동그랗게) - I…
image CSS - Thumbnail Images - (썸네일 이미지 스타일)
image CSS - enter an Image (이미지 가운데정렬)
image CSS - Image Text - (이미지 위에 텍스트 배치/띄우기)
image CSS - Polaroid Images / Cards - (폴라로이드 이미지)
image CSS - Image Filter - (이미지 필터 - 흑백/흐림 효과)
image CSS - Image Hover Overlay - (이미지 마우스오버시 효과 = 이미지허버효과 = 이미지마우…
image CSS - Image Modal - (Advanced) - (이미지 모달 띄우기 효과)
button CSS - Button - 버튼스타일 (버튼크기, 버튼색깔, 버튼비활성화, 버튼그룹, 이미지위버튼)
pagination CSS - 페이징 - 기본 스타일 (Simple Pagination)
pagination CSS - 페이징 - 마우스오버 시 색깔 변경 (Active and Hoverable Pagination)
pagination CSS - 페이징 - 트랜지션 효과 (Hoverable Transition Effect)
pagination CSS - 페이징 - 테두리 추가 (Bordered Pagination)
9/25
목록
찾아주셔서 감사합니다. Since 2012