html Erhöhung der oberen Ränder in einem div

-3

Ich möchte die Entfernung von der Anzeige zu den Tasten im zweiten Rechner zu 100px sein, aber ich weiß nicht, wie das geht.html Erhöhung der oberen Ränder in einem div

Dies ist mein HTML-Code:

<!DOCTYPE html> 
<html> 
<head> 
<link rel="stylesheet" type="text/css" href="design2.css" > 
    <title>Calculator Italy</title> 
</head> 
<body bgcolor="skyblue"> 
    <form> 
     <div id="italyCalc"> 
      <input type="text" id="display" disabled><br> 

      <input type="button" id="item1" onclick="adding('1')" value="1" > 
      <input type="button" id="item1" onclick="adding('2')" value="2" > 
      <input type="button" id="item1" onclick="adding('3')" value="3" > 
      <input type="button" id="item1" onclick="adding('+')" value="+" ><br> 

      <input type="button" id="item2" onclick="adding('4')" value="4" > 
      <input type="button" id="item2" onclick="adding('5')" value="5" > 
      <input type="button" id="item2" onclick="adding('6')" value="6" > 
      <input type="button" id="item2" onclick="deleteLast()" value="<--" ><br> 

      <input type="button" id="item1" onclick="adding('7')" value="7" > 
      <input type="button" id="item1" onclick="adding('8')" value="8" > 
      <input type="button" id="item1" onclick="adding('9')" value="9" > 

      <input type="button" id="item1" onclick="adding('.')" value="." ><br> 
      <input type="button" id="item2" onclick="adding('0')" value="0" > 
      <input type="button" id="item2" onclick="adding('-')" value="-" > 
      <input type="button" id="item2" onclick="adding('*')" value="*" > 
      <input type="button" id="item2" onclick="adding('/')" value="/" ><br> 

      <input type="button" id="itemBig" onclick="adding('C')" value="C" > 
      <input type="button" id="item1" onclick="power('2')" value="X^2" > 
      <input type="button" id="itemBig" onclick="returnResult()" value="=" > 

     </div> 
     <div id="italyCalc2"> 
      <input type="text" id="display2" disabled><br> 


      <input type="button" id="item" onclick="adding2('1')" value="1" > 
      <input type="button" id="item" onclick="adding2('2')" value="2" > 
      <input type="button" id="item" onclick="adding2('3')" value="3" > 
      <input type="button" id="item" onclick="adding2('+')" value="+" > 
      <input type="button" id="item" onclick="power3('3')" value="X^3" ><br> 

      <input type="button" id="item" onclick="adding2('4')" value="4" > 
      <input type="button" id="item" onclick="adding2('5')" value="5" > 
      <input type="button" id="item" onclick="adding2('6')" value="6" > 
      <input type="button" id="item" onclick="deleteLast2()" value="<--" > 
      <input type="button" id="item" onclick="sin2()" value="sin" ><br> 

      <input type="button" id="item" onclick="adding2('7')" value="7" > 
      <input type="button" id="item" onclick="adding2('8')" value="8" > 
      <input type="button" id="item" onclick="adding2('9')" value="9" > 

      <input type="button" id="item" onclick="adding2('.')" value="." > 
      <input type="button" id="item" onclick="cos2()" value="cos" ><br> 
      <input type="button" id="item" onclick="adding2('0')" value="0" > 
      <input type="button" id="item" onclick="adding2('-')" value="-" > 
      <input type="button" id="item" onclick="adding2('*')" value="*" > 
      <input type="button" id="item" onclick="adding2('/')" value="/" > 
      <input type="button" id="item" onclick="root2('2')" value="sqrt" ><br> 

      <input type="button" id="itemBig" onclick="adding2('C')" value="C" > 
      <input type="button" id="itemBig" onclick="returnResult2()" value="=" > 

     </div> 
    </form> 
<script src="logic2.js"></script> 
</body> 
</html>

Dieser Teil meines CSS-Code ist:

#italyCalc2 
{ 
    height: 500px; 
    width: 300px; 
    border: 3px solid green; 
    box-shadow: 0px 0px 100px green; 
    background-image: url("https://tse3.mm.bing.net/th?id=OIP.M4cfd6650aaff3feadc8bed590687b6b7H0&pid=15.1&P=0&w=274&h=172"); 
    margin: 100px; 
    text-align: center; 
    float:left; 

} 

#display2 
{ 
    margin-top: 20px; 
    margin-bottom: 20px; 
    border: 1px solid red; 
    box-shadow: 0px 0px 30px red; 
    width: 260px; 
    height: 60px; 
    text-align: right; 
    font: 20px bold; 
    color: red; 
} 

#item 
{ 
    width: 41px; 
    height: 41px; 
    margin-left: 4px; 
    margin-bottom: 31px; 
    box-shadow: 0px 0px 20px white; 
    cursor: pointer; 
    color: white; 
    background-color: red; 
    border: 1px solid white; 
    font-weight: bold; 
}

Mit anderen Worten, die ich ohne Änderung der Entfernung die Anzeige und 100px unter den Tasten sehen möchten von einem Knopf zum anderen.

Wie kann ich das tun?

Quelle

2016-09-26 Michele della Mea

nur eine Anmerkung: IDs sollten nur * einmal * in einem Dokument verwendet werden (Sie haben eine Menge 'item', 'item1' und 'item2' IDs.) Wenn Sie das gleiche Styling auf t anwenden möchten Saum, benutze Klassen, aber keine IDs. – Johannes

Sie könnten Ihren Schaltflächen einen Rand hinzufügen, aber Sie sollten sie in ein div einbinden.

#italyCalc2 { 
 
    height: 500px; 
 
    width: 300px; 
 
    border: 3px solid green; 
 
    box-shadow: 0px 0px 100px green; 
 
    background-image: url("https://tse3.mm.bing.net/th?id=OIP.M4cfd6650aaff3feadc8bed590687b6b7H0&pid=15.1&P=0&w=274&h=172"); 
 
    margin: 100px; 
 
    text-align: center; 
 
    float: left; 
 
} 
 

 
#display2 { 
 
    margin-top: 20px; 
 
    //margin-bottom: 20px; 
 
    border: 1px solid red; 
 
    box-shadow: 0px 0px 30px red; 
 
    width: 260px; 
 
    height: 60px; 
 
    text-align: right; 
 
    font: 20px bold; 
 
    color: red; 
 
} 
 

 
#item { 
 
    width: 41px; 
 
    height: 41px; 
 
    margin-left: 4px; 
 
    margin-bottom: 31px; 
 
    box-shadow: 0px 0px 20px white; 
 
    cursor: pointer; 
 
    color: white; 
 
    background-color: red; 
 
    border: 1px solid white; 
 
    font-weight: bold; 
 
} 
 

 
.buttons { 
 
    margin-top: 100px; 
 
}

<body bgcolor="skyblue"> 
 
    <form> 
 
    <div id="italyCalc"> 
 
     <input type="text" id="display" disabled> 
 
     <br> 
 

 

 

 
     <input type="button" id="item1" onclick="adding('1')" value="1"> 
 
     <input type="button" id="item1" onclick="adding('2')" value="2"> 
 
     <input type="button" id="item1" onclick="adding('3')" value="3"> 
 
     <input type="button" id="item1" onclick="adding('+')" value="+"> 
 
     <br> 
 

 
     <input type="button" id="item2" onclick="adding('4')" value="4"> 
 
     <input type="button" id="item2" onclick="adding('5')" value="5"> 
 
     <input type="button" id="item2" onclick="adding('6')" value="6"> 
 
     <input type="button" id="item2" onclick="deleteLast()" value="<--"> 
 
     <br> 
 

 
     <input type="button" id="item1" onclick="adding('7')" value="7"> 
 
     <input type="button" id="item1" onclick="adding('8')" value="8"> 
 
     <input type="button" id="item1" onclick="adding('9')" value="9"> 
 

 
     <input type="button" id="item1" onclick="adding('.')" value="."> 
 
     <br> 
 
     <input type="button" id="item2" onclick="adding('0')" value="0"> 
 
     <input type="button" id="item2" onclick="adding('-')" value="-"> 
 
     <input type="button" id="item2" onclick="adding('*')" value="*"> 
 
     <input type="button" id="item2" onclick="adding('/')" value="/"> 
 
     <br> 
 

 
     <input type="button" id="itemBig" onclick="adding('C')" value="C"> 
 
     <input type="button" id="item1" onclick="power('2')" value="X^2"> 
 
     <input type="button" id="itemBig" onclick="returnResult()" value="="> 
 

 
    </div> 
 
    <div id="italyCalc2"> 
 
     <input type="text" id="display2" disabled> 
 
     <br> 
 

 
     <div class="buttons"> 
 
     <input type="button" id="item" onclick="adding2('1')" value="1"> 
 
     <input type="button" id="item" onclick="adding2('2')" value="2"> 
 
     <input type="button" id="item" onclick="adding2('3')" value="3"> 
 
     <input type="button" id="item" onclick="adding2('+')" value="+"> 
 
     <input type="button" id="item" onclick="power3('3')" value="X^3"> 
 
     <br> 
 

 
     <input type="button" id="item" onclick="adding2('4')" value="4"> 
 
     <input type="button" id="item" onclick="adding2('5')" value="5"> 
 
     <input type="button" id="item" onclick="adding2('6')" value="6"> 
 
     <input type="button" id="item" onclick="deleteLast2()" value="<--"> 
 
     <input type="button" id="item" onclick="sin2()" value="sin"> 
 
     <br> 
 

 
     <input type="button" id="item" onclick="adding2('7')" value="7"> 
 
     <input type="button" id="item" onclick="adding2('8')" value="8"> 
 
     <input type="button" id="item" onclick="adding2('9')" value="9"> 
 

 
     <input type="button" id="item" onclick="adding2('.')" value="."> 
 
     <input type="button" id="item" onclick="cos2()" value="cos"> 
 
     <br> 
 
     <input type="button" id="item" onclick="adding2('0')" value="0"> 
 
     <input type="button" id="item" onclick="adding2('-')" value="-"> 
 
     <input type="button" id="item" onclick="adding2('*')" value="*"> 
 
     <input type="button" id="item" onclick="adding2('/')" value="/"> 
 
     <input type="button" id="item" onclick="root2('2')" value="sqrt"> 
 
     <br> 
 

 
     <input type="button" id="itemBig" onclick="adding2('C')" value="C"> 
 
     <input type="button" id="itemBig" onclick="returnResult2()" value="="> 
 

 
     </div> 
 

 
    </div> 
 
    </form>

https://jsfiddle.net/ygw062pe/

Quelle

2016-09-26 14:39:12 ksav

ich sagen würde, nur hinzufügen, dass margin-bottom zu #display2 und ein Blockelement machen:

#display2 { 
    display: block: 
    margin-top: 20px; 
    margin-bottom: 100px; 
    border: 1px solid red; 
    box-shadow: 0px 0px 30px red; 
    width: 260px; 
    height: 60px; 
    text-align: right; 
    font: 20px bold; 
    color: red; 
}

Quelle

2016-09-26 14:51:23 Johannes

html Erhöhung der oberen Ränder in einem div

Antwort

Verwandte Themen