Reputation: 1966
I'm having troubles with the top margin of the "Lorem ipsum". I tried changing the margins of both div's but I couldn't figure out how to increase the upper margin of the text without creating a white space.
Here is the 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>
And here the 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;
}
Thanks!
Upvotes: 0
Views: 247
Reputation: 203
You're looking for padding, not margin try adding to #contenido p
padding-top:10px;
For more information look into CSS Box Model: https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Box_Model/Introduction_to_the_CSS_box_model
Upvotes: 1
Reputation: 11114
You wan to use padding instead of margin.
#contenido p {
padding-top: 20px; /* Use padding*/
text-align: justify;
margin: 0 50px;
background-color: #F5F5DC;
}
Upvotes: 1