2016-05-11 20 views
0

Wenn ich ein Element mit div erstellen möchte, erstellt es einen Abstand zwischen dem Inhalt und dem Rahmen. (blaue Linie). Wenn Sie span verwenden, wird das Element unterbrochen und der Inhalt außerhalb der Grenzen angezeigt.
http://i66.tinypic.com/23k4xsp.png

Das ist mein CSS-Code:
div-Tag verursacht Zeilenumbruch

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

Und mein 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> 

Gibt es eine Abhilfe? Ich bin ziemlich neu in Webdesign, ich konnte nichts auf der Webz finden ... Danke

+0

Es 'Display genannt. Aber Sie sollten nicht 'div' verwenden, wenn Sie etwas inline anzeigen möchten. 'span' wird dafür verwendet. –

+0

Wie ich schon sagte, es funktioniert nicht. Das macht es nur noch schlimmer, weil die Grenzen in der Mitte des Bildschirms als 2 Klammern schweben, während der Inhalt irgendwo links abgeladen wird. –

Antwort

0

Der Raum (Linie blau) kommt, weil der <h3> Tag eine Standardeinstellung margin hat. Wenn Sie es auf margin: 0 einstellen, wird der Speicherplatz nicht mehr angezeigt.

h3{ 
    margin: 0; 
} 

Auch ich kann nicht Ihren Zeilenumbruch reproduzieren: JSFiddle.

0

Dies wird tatsächlich durch das h3-Tag verursacht. Die Header-Tags sind standardmäßig mit einem Rand oberhalb und unterhalb des Elements versehen.

Versuchen Sie, Ihre CSS hinzufügen: inline`: h3 { margin-top: 0; }