如何在不留空白的情況下更改div頂部邊距？

Question

我對「Lorem ipsum」的頂部邊緣有麻煩。我試圖改變兩個div的邊距，但我無法弄清楚如何在不創建空白的情況下增加文本的上邊距。

JSfiddle

下面是HTML：

<div id="nav"> 
     <ul> 
      <a href="#">Inicio</a> 
      <a href="otras/servicios.html">Servicios</a> 
      <a href="otras/contacto.html">Contacto</a> 
     </ul> 
    </div> 



    <div id="container"> 
     <div id="contenido"> 
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p> 
     </div> 
     </div> 

而且這裏的CSS：

body { 

    margin: 0; 
    font: 'Roboto'; 

} 

#nav { 

    height: 50px; 
    width: 900px; 
    background-color: #B18904; 
    margin: 0 auto; 

} 

#nav ul { 
    padding: 0; 
    margin: 0; 
} 

#nav a { 

    display: block; 
    float: left; 
    color: #fff; 
    text-decoration: none; 
    padding: 0 20px; 
    line-height: 50px; 
    border-right: 1px solid #fff; 

} 

#nav a:hover { 
    background-color: #c79905; 
} 

#container { 

    width: 900px; 
    margin: 0 auto; 
    background-color: #F5F5DC; 

} 

#contenido p { 

    text-align: justify; 
    margin: 0 50px; 
    background-color: #F5F5DC; 
    } 

謝謝！

Answer 1

你要找的填充，而不是保證金嘗試添加到#contenido p

padding-top:10px; 

欲瞭解更多信息，看看CSS盒模型：https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Box_Model/Introduction_to_the_CSS_box_model

Answer 2

你要使用填充而不是邊距。

#contenido p { 
    padding-top: 20px; /* Use padding*/ 
    text-align: justify; 
    margin: 0 50px; 
    background-color: #F5F5DC; 
}