div에 위쪽 여백을 추가하려고했지만 응답이 없습니다.

Question

오른쪽에 div 클래스 원이 페이지를 표시하지만 여백을 추가하는 경우도 있습니다. 0 자동; 아무 것도 작동하지 않는다. 여기

은 여기 내 CSS를

html { 
    font-size: 16px; 
} 

body { 
    background: #BAE4FF; 
    font-family: "Open Sans", sans-serif; 
} 

nav { 
    position: absolute; 
    width: 100%; 
    left: 0; 
    top: 0; 
    text-align: center; 
    font-weight: 400; 
} 

nav .menu { 
    list-style-type: none; 
    padding: 0; 
    margin: 0; 
} 

nav .menu li { 
    padding: 3px 0 3px 0; 
    display: none; 
} 

nav .menu li a { 
    text-decoration: none; 
    color: #fff; 
    font-size: 2.1em; 
} 

nav .menu .blog { 
    background: #1669B5; 
} 

nav .menu .contact { 
    background: #3892E3; 
} 

nav #touchNav { 
    background: #48B4EF; 
    width: 100%; 
    display: block; 
    color: #fff; 
    font-size: 2.1em; 
    padding: 3px 0 3px 0; 
    text-decoration: none; 
} 

header { 
    margin: 50px 0 0 0; 
    margin-top: 50px; 
    text-align: center; 
    width: 100%; 
} 

header h1 { 
    margin: 0 auto; 
    width: 100%; 
} 

header h1 .tech { 
    color: #fff; 
    font-weight: 500; 
    margin-right: 3.5px; 
    font-size: 1.1em; 
} 

header h1 .basics { 
    color: #48B5EF; 
    margin-left: 3.5px; 
    font-size: 1.3em; 
} 

header h2 { 
    font-size: 2.1em; 
    font-weight: 100; 
    width: 100%; 
    margin: 0 auto; 
    color: #fff; 
    line-height: 1.2em; 
} 

.circle { 
    margin-top: 100px; 
    clear: both; 
    width: 20px; 
    height: 20px; 
    background: #48B5EF; 
    -moz-border-radius: 10px; 
    -webkit-border-radius: 10px; 
    border-radius: 10px; 
    margin: 0 auto; 
} 

Answer 1

위치 태그를 추가하려고합니다. u는 사용자의 필요에 맞는 .circle 클래스로 고정식으로 사용할 수 있습니다.

Answer 2

그것은 당신이 CSS에 대해 질문 할 때 페이지의 예를 가지고 beeter 것,
는하지만 여기 내 HTML/PHP

<?php 
/* 
Template Name: Home Page 
*/ 
?> 

<?php get_header(); ?> 

<div id="content"> 

    <header> 
     <h1><span class="tech">TECH</span><span class="basics">BASICS</span></h1> 
     <h2>Personal Tech Specialists</h2> 
    </header> 

    <div class="circle"></div> 

</div> <!-- end #content --> 

<?php get_footer(); ?> 

입니다 진짜 문제 당신을 위해 CSS 마진 상단에 예상대로 작동하지 않습니다.
모든 요소가 동일한 상위 Z- 색인에 있거나 (모두 간단하게 말하면 부모가 모두 있음) 즉, li이 ul 내에있는 경우 요소의 맨 위에 공백이 생기지 않습니다.
위쪽 여백은 li 사이의 간격에 li과 ul 사이가 아닌 간격에 영향을줍니다.
ul을 padding-top으로 지정해야합니다. 도움이 되길 바랍니다

Answer 3

서클 클래스 여백은 재미 있습니다.

.circle { 
    margin-top: 100px; 
    margin-left: auto; 
    margin-right: auto; 
    clear: both; 
    width: 20px; 
    height: 20px; 
    background: #48B5EF; 
    -moz-border-radius: 10px; 
    -webkit-border-radius: 10px; 
    border-radius: 10px; 
} 

http://jsfiddle.net/q5w3G/1/

하나이 역시 작동 할 것이라고 생각해야하지만 첫 번째 한 번 더 신뢰 :

대신이 시도

.circle { 
    margin: 0 auto; 
    margin-top: 100px; 
    clear: both; 
    width: 20px; 
    height: 20px; 
    background: #48B5EF; 
    -moz-border-radius: 10px; 
    -webkit-border-radius: 10px; 
    border-radius: 10px; 
} 

http://jsfiddle.net/q5w3G/2/

CSS는 을 의미 계단식 스타일 시트. 계단식이란 하나의 속성이 동일한 요소에 대해 두 번 이상 정의되면 마지막에 읽은 속성이 적용된다는 것을 의미합니다. 따라서 원의 마진을 정의한 다음 동일한 스타일 시트에서 다시 마진을 정의한 다음 나중에 두 번째 스타일 시트에서 머리 부분의 첫 번째 다음에 rel 링크가있는 스타일 시트를 만든 다음 머리 부분 자체에서 스타일의 rel 링크를 만든 후 태그를 작성한 다음 요소 자체를 다시 인라인하면 인라인 값이 사용됩니다. 사실 그것이 사용되는 순서입니다.