Using <br> together with display: inline-block. Bad practice?

Question

I'm using a form like the following:

<form action="#" method="post">

  <div class="row">
    <label for="email">E-Mail</label>
    <input type="text" name="email" id="email">
  </div>

  <div class="row">
    <label for="password">Password</label>
    <input type="password" name="password" id="password">
    <br>
    <label for="passwordRepeat">Repeat Password</label>
    <input type="password" name="passwordRepeat" id="passwordRepeat">
  </div>

  <div class="row">
    <label for="phonenumber">Phone Number</label>
    <input type="text" name="phonenumber" id="phonenumber">
  </div>

</form>

with the following styles:

.row {
  background-color: #eee;
  margin-bottom: 10px;
  padding: 5px;
}
.row > * {
  display: inline-block;
  vertical-align: middle;
}
.row > label {
    width: 200px;
}

Take a look at the JSFiddle.

I'm using a <br> tag to break the line between a bunch of elements with the property display: inline-block. I'm aware that it is of course bad practice to use <br> instead of margin and padding. That's the reason it became so unpopular.

As far as I know there is no good reason to not use a single <br> tag in an inline element as it is intended to be: As a line break in text without creating a new text section. With display: inline-block, you simulate the inline behaviour to your block elements. Spaces between elements appear as they would in an inline element. In my case, the <br> is used instead of two wrapper <div>'s. I do like my HTML code clean, so I hesitate in using to many wrapper <div>'s. Is it bad practice to use a <br> in this exact case? I think it is very clear what happens here, if you just read the HTML flie. What do you think about that (without any prejudgments about <br> in general)?

Answer 1

I believe the answer is Yes. <br /> is for line breaks in text and not for positioning, But I will give you a situation where it would hurt you in the long run. Say you have a mobile layout for your fields, and you want them to be 100% width on small screens - with labels above... and then in another case you want them to vertically align next to another... and then in another situation land in a grid like setup. Those linebreaks are going to become cumbersome.

Here is a jsFiddle of that.

I did see someone using them in a clever way where they used display: none; on them at certain break points that rendered them inactive. I didn't expect that to work. I can only really imagine using them for:

Cosmo magazine
style - huge
text layouts

and even then I would use lettering.js to insert spans. But hey --- it's not that people will say you were wrong... it's what does the job best. And I don't think that <br /> ever really suits positioning.

With HTML5, it seems like everything has an element now, so div's are for positioning. That seems pretty semantic to me.

HTML

<div class="input-wrapper">
    <label data-required="required">E-Mail</label>
    <input type="email" name="email" />
</div>

CSS

.your-form .input-wrapper {
    width: 100%;
    float: left;
    margin-bottom: 2em;
}

.your-form label {
    display: block;
    width: 100%;
    float: left;
}

[data-required="required"]:after{
    content: "*";
    color: red;
    font-size: .8em;
    vertical-align: top;
    padding: .2em;
}

.your-form input{
    display: block;
    width: 100%;
    float: left;
}

@media screen and (min-width: 28em) {

    .your-form label {
        width: auto;
        float: none;
        display: inline-block;
        vertical-align: middle;
        min-width: 10em;
    }

    .your-form input{
        width: auto; /* overide previous rule */
        float: none; /* overide previous rule */
        display: inline-block; /* center vertically */
        vertical-align: middle; /* center vertically */
        /* min-width: 20em; */
        font-size: 1.4em; /* just to show vertical align */
    }

} /* end break point */