CODEWITHSUNDEEP
htmlcsstwitter-bootstraptwitter-bootstrap-3
finspin
finspin

Reputation: 4061

How do you explain this div spacing issue?

This spacing issue was driving me crazy. I finally figured out that in order to have spaces between the form elements, I need to format my HTML code as shown below.

Could somebody explain what's going on here? Is this some newline issue?

Notes:

1. Form elements with spaces:

enter image description here

<!DOCTYPE html>
<html>
  <head>
    <title>Elements with spaces</title>
    <link href="http://netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet" media="screen">
  </head>
  <body>
    <form class="form-inline" role="form">
      <div class="form-group">
        <input type="email" class="form-control" placeholder="Enter email">
      </div>
      <div class="form-group">
        <input type="password" class="form-control" placeholder="Password">
      </div>
      <button type="submit" class="btn btn-default">Sign in</button>
    </form>
  </body>
</html>

2. Form elements without spaces:

enter image description here

<!DOCTYPE html>
<html>
  <head>
    <title>Elements with spaces</title>
    <link href="http://netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet" media="screen">
  </head>
  <body>
    <form class="form-inline" role="form">
      <div class="form-group">
        <input type="email" class="form-control" placeholder="Enter email">
      </div><div class="form-group">
        <input type="password" class="form-control" placeholder="Password">
      </div><button type="submit" class="btn btn-default">Sign in</button>
    </form>
  </body>
</html>

Upvotes: 0

Views: 241

Answers (3)

Radu Bompa
Radu Bompa

Reputation: 1634

As an alternative to j08691 answer, this is the method I use to prevent white-space:

<div class="form-group">
    <input type="email" class="form-control" placeholder="Enter email">
</div
><div class="form-group">
    <input type="password" class="form-control" placeholder="Password">
</div>

You don't introduce unnecessary comments, but auto-formatting in some IDEs might mess up your indentation a bit.

Upvotes: 0

Carol Skelly
Carol Skelly

Reputation: 362380

According to the Bootstrap docs (http://getbootstrap.com/css/#forms-inline), form-group is used to wrap the form-control so your 2nd approach is better.

Your 1st example is rendering as expected since the Bootstrap CSS sets inline-block and no margin on the form-control itself. You could override this behavior by using margin in the CSS..

.form-inline .form-control {
  display: inline-block;
  margin-right:4px;
}

Demo: http://bootply.com/86947

Upvotes: 1

j08691
j08691

Reputation: 207901

Inline elements are sensitive to white space in your code. Since you have divs in your example which are normally block level elements, but they're appearing side by side, your CSS is most likely changing them to display inline. You could also remove the gap by using HTML comments.

<div class="form-group">
    <input type="email" class="form-control" placeholder="Enter email">
  </div><!--
  --><div class="form-group">
    <input type="password" class="form-control" placeholder="Password">
</div>

Upvotes: 3

Related Questions