Как изменить верхний край 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 Box Model: 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; 
}