在html中如何在按钮之间垂直留出空间？_Html

在html中如何在按钮之间垂直留出空间？

html

在html中如何在按钮之间垂直留出空间？,html,Html,例如，在给定的代码中，我希望在“1”按钮和“4”按钮、“2”按钮和“5”按钮、“3”按钮和“6”按钮之间留有空格，以此类推，例如在“1”按钮和“2”按钮之间留有空格 <div class="text-center"> <form method="post" action="#" name="cal"> <input type="butt

例如，在给定的代码中，我希望在“1”按钮和“4”按钮、“2”按钮和“5”按钮、“3”按钮和“6”按钮之间留有空格，以此类推，例如在“1”按钮和“2”按钮之间留有空格

<div class="text-center">
<form  method="post"  action="#" name="cal">
    
    
    
    <input type="button" value=" 1 " class="btn btn-outline-dark" onclick="cal.expression.value += '1'" >
    <input type="button" value=" 2 " class="btn btn-outline-dark" onclick="cal.expression.value += '2'" >
    <input type="button" value=" 3 " class="btn btn-outline-dark" onclick="cal.expression.value += '3'" ><br>
    <input type="button" value=" 4 " class="btn btn-outline-dark" onclick="cal.expression.value += '4'" >
    <input type="button" value=" 5 " class="btn btn-outline-dark" onclick="cal.expression.value += '5'" >
    <input type="button" value=" 6 " class="btn btn-outline-dark" onclick="cal.expression.value += '6'" ><br>
    <input type="button" value=" 7 " class="btn btn-outline-dark" onclick="cal.expression.value += '7'" >
    <input type="button" value=" 8 " class="btn btn-outline-dark" onclick="cal.expression.value += '8'" >
    <input type="button" value=" 9 " class="btn btn-outline-dark" onclick="cal.expression.value += '9'" ><br>
    <input type="submit" value="=" class="btn btn-outline-dark" >
</form>
</div>

使用边距，它将帮助您在按钮之间留出空间

 .btn{
    margin:5px;
    }


钮扣{
边距：10px；#您可以增加或减少此值来调整间距。您还可以使用边距底部、边距顶部、边距右侧、边距左侧来调整各个边的间距。
}

用两个

尝试了你的代码，效果很好。你想要左上右下边距吗？@crazyyou滥用

不是好做法。边距更好。@Spectric我知道，但他说“…用html”。或者他可以使用，这实际上并不更好：p

<html>
<head>
<style>

button {
margin : 10px;   #you can increase or decrease this value to adjust the spaces you can also use margin-bottom,margin-top,margin-right,margin-left to adjust spaces of individual side.
}

</style>
</head>
<body>

<div class="text-center">
<form  method="post"  action="#" name="cal">
    
    
    
    <input type="button" value=" 1 " class="btn btn-outline-dark" onclick="cal.expression.value += '1'" >
    <input type="button" value=" 2 " class="btn btn-outline-dark" onclick="cal.expression.value += '2'" >
    <input type="button" value=" 3 " class="btn btn-outline-dark" onclick="cal.expression.value += '3'" ><br>
    <input type="button" value=" 4 " class="btn btn-outline-dark" onclick="cal.expression.value += '4'" >
    <input type="button" value=" 5 " class="btn btn-outline-dark" onclick="cal.expression.value += '5'" >
    <input type="button" value=" 6 " class="btn btn-outline-dark" onclick="cal.expression.value += '6'" ><br>
    <input type="button" value=" 7 " class="btn btn-outline-dark" onclick="cal.expression.value += '7'" >
    <input type="button" value=" 8 " class="btn btn-outline-dark" onclick="cal.expression.value += '8'" >
    <input type="button" value=" 9 " class="btn btn-outline-dark" onclick="cal.expression.value += '9'" ><br>
    <input type="submit" value="=" class="btn btn-outline-dark" >
</form>
</div>
</body>
</html>