Place first result with margin greater than the others

Question

Place first result with margin greater than the others

Navigation

#1 by (2 votes)
#2 by (1 votes)

2

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

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

asked by anonymous 09.07.2014 / 22:26

2 answers

Select notes to be printed Move square with mouse only in vector X or Y

score 2 · Answer 1

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

score 1 · Answer 2

Use an external div:

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

And in 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

Note that the id must be unique on the page. Using a single ID more than once on the same page makes your HTML invalid.