CODEWITHSUNDEEP
htmlcss
Poeder Ruiker
Poeder Ruiker

Reputation: 11

div tag causes line break

When I want to make an element with div, it creates a space between the content and the border. (blue line). Using span causes the element to break, displaying the content outside the borders.
http://i66.tinypic.com/23k4xsp.png

This is my CSS code:

#main1 {
margin-left: 40%;
background-color: lightgrey;
width: 20%;
border: 5px;
padding: 5px;
border-style: solid;
border-color: grey;
border-width: 2px;
text-align: left;
}
body {
text-align: center;
background-color: yellow;
font-family: "Arial";
}

And my HTML:

<!DOCTYPE html>

<html>
    <head>
        <title>BMI</title>
        <link rel="stylesheet" type="text/css" href="main.css">
    </head>

    <body>
    <div id="main1">
        <h3>BMI calculator</h3>
        <form action="results.php" method=""post"">
            <input type="radio" name="gender" value="man">Man<br>
            <input type="radio" name="gender" value="vrouw">Vrouw<br><br>
            Lengte:<br>
            <input type="text" name="lengte"><br>
            Gewicht:<br>
            <input type="text" name="gewicht"><br><hr>
            <button action="submit">Submit</button>
        </form>
    </div>
    </body>
</html>

Is there any workaround? I'm fairly new to webdesign, I couldn't find anything on the webz... Thanks

Upvotes: 0

Views: 382

Answers (2)

James Anderson
James Anderson

Reputation: 163

This is actually caused by the h3 tag. The header tags by default come with a margin both above and below the element.

Try adding to your CSS: h3 { margin-top: 0; }

Upvotes: 0

Francisco Romero
Francisco Romero

Reputation: 13189

The space (line blue) comes because the <h3> tag has a default margin. If you set it to margin: 0 the space will disapear.

h3{
  margin: 0;
}

Also, I cannot reproduce your line break: JSFiddle.

Upvotes: 1

Related Questions