Question Markup

Generic question markup

by Akkuma

HTML

<div class="question">
    <p>Who's your daddy and what does he do?</p>
    <label>Do It</label>
    <input type="text" />
    
    <label>Do It</label>
    <input type="text" />
    
    <label>Do It</label>
    <input type="text" />
</div>
   
<div class="question">
    <p>Who's your daddy and what does he do?</p>
    <label>Do It</label>
    <input type="text" />
    
    <label>Do It</label>
    <input type="text" class="error" />
    <label class="error">Error</label>
    
    <label>Do It</label>
    <input type="text" />
</div>

CSS

label, input { display: block; }

p { margin-bottom: 1em; }

input { margin-bottom: 1em; }

.question { margin-bottom: 2em; }

.question input, .question label { margin-left: 1em; }

input.error { margin-bottom: 0; }
label.error { margin-bottom: .5em; }