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;
}

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

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