html增加div中的上边距_Html_Css

html增加div中的上边距

html css

html增加div中的上边距,html,css,Html,Css,我希望从显示器到第二个计算器中按钮的距离为100px，但我不知道如何做到这一点这是我的html代码： <!DOCTYPE html> <html> <head> <link rel="stylesheet" type="text/css" href="design2.css" > <title>Calculator Italy</title> </head> <body bgcolor="skyb

我希望从显示器到第二个计算器中按钮的距离为100px，但我不知道如何做到这一点

这是我的html代码：

<!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>

换句话说，我希望在不改变从一个按钮到另一个按钮的距离的情况下，看到按钮下方的显示和100px

我该怎么做呢？

您可以在按钮上添加一个页边空白，但您应该将它们包装成一个div

italyCalc2{ 高度：500px；宽度：300px；边框：3倍纯绿；方框阴影：0px 0px 100px绿色；背景图像：urlhttps://tse3.mm.bing.net/th?id=OIP.M4cfd6650aaff3feadc8bed590687b6b7H0&pid=15.1&P=0&w=274&h=172; 利润率：100像素；文本对齐：居中；浮动：左； } 显示器2{ 边缘顶部：20px； //边缘底部：20px；边框：1px纯红；盒影：0px 0px 30px红色；宽度：260px；高度：60px；文本对齐：右对齐；字体：20px粗体；颜色：红色； } 项目{ 宽度：41px；高度：41px；左边距：4倍；边缘底部：31px；盒影：0px 0px 20px白色；光标：指针；颜色：白色；背景色：红色；边框：1px纯白；字体大小：粗体； } .按钮{ 边缘顶部：100px； }

我想说的是，只需将边距底部添加到display2，并使其成为块元素：

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

请注意：如果文档中有大量“item”、“item1”和“item2”ID，则ID只能使用一次。如果要对它们应用相同的样式，请使用类，而不是ID。

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