Place first result with greater margin than the others

Asked

Viewed 24 times

2

Hi, my question is kind of strange, I always put in css two ids for when I put a margin, the first with margin 20px and the second with margin 10px, I wanted to know if there is any way to do this automatically, follow example because this explanatory text this bad!!!

Example:

Jsfiddle

HTML:

<div id="contato-texto">Nome:</div>
<div id="contato-texto2">Nome:</div>
<div id="contato-texto2">Nome:</div>
<div id="contato-texto2">Nome:</div>

CSS:

#contato-texto {
margin-top: 20px;
margin-left: 20px;
font-family: OratorStd;
color: #e4d88a;
font-size: 14px;
text-align: left;
}
#contato-texto2 {
margin-top: 5px;
margin-left: 20px;
font-family: OratorStd;
color: #e4d88a;
font-size: 14px;
text-align: left;
}
css

2 answers

2

A good rule is to do what is common first and then what is unique. So I could compress this CSS to this:

#contato-texto, #contato-texto2 {
    margin-top: 20px;
    margin-left: 20px;
    font-family: OratorStd;
    color: #e4d88a;
    font-size: 14px;
    text-align: left;
}
#contato-texto2 {
    margin-top: 5px;
}

1

Use an external div:

<div id="contato-texto">
    <div>Nome:</div>
    <div>Nome:</div>
    <div>Nome:</div>
    <div>Nome:</div>
</div>

And in the CSS:

#contato-texto > div {
    margin-bottom: 5px;
}

#contato-texto {
    margin-top: 20px;
    margin-left: 20px;
    font-family: OratorStd;
    color: #e4d88a;
    font-size: 14px;
    text-align: left;
}

Fiddle

It is worth noting that the id should be single on the page. Using a single ID more than once on the same page makes your HTML invalid.

Browser other questions tagged css

You are not signed in. Login or sign up in order to post.