在 HTML 中的按钮之间添加空间
-
在 HTML 中在两个按钮之间添加一个空的
div
元素以添加它们之间的空间 -
在 HTML 中使用
margin-right
属性的按钮之间放置空间 -
在 HTML 中使用
margin-right
属性和not(:last-child)
选择器的多个按钮之间提供空间
本文将介绍几种在两个 HTML 按钮之间田间空间的方法。
在 HTML 中在两个按钮之间添加一个空的 div
元素以添加它们之间的空间
可以在两个按钮之间添加一个空的 div
以在它们之间添加一个空格。然后,我们可以为 div
提供一些宽度,从而在按钮之间创建一些空间。
默认情况下,div 具有 block
的 display
属性。这意味着 div
占据其位置的一整行。
如果我们在 div
之后添加一个元素,该元素将被放置在浏览器中的 div
下方。
因此我们必须将 div
的显示属性更改为 inline-block
。inline-block
元素具有块和内联的属性。
inline-block
元素可以具有宽度、边距、填充等,但与 block
元素不同,它们不会占据其位置的整行。
例如,创建一个 div
;在那个 div
中,使用 button
标签创建两个按钮。将这些按钮命名为 Button 1
和 Button 2
。
在这些按钮之间创建一个 div
并给它一个 space
类。这个 div
不应包含任何元素。
在 CSS 中选择内部的 div
及其类 space
,并将 display
属性设置为 inner-block
。根据要求给 div
一些宽度。
请注意,width
的值将是按钮之间的空间。此外,将 height
属性设置为 auto
,以便 div
仅采用所需的高度。
下面的示例显示两个按钮的空间为 4px
。
示例代码:
<div>
<button>
Button 1
</button>
<div class="space">
</div>
<button>
Button 2
</button>
</div>
.space {
width: 4px;
height: auto;
display: inline-block;
}
在 HTML 中使用 margin-right
属性的按钮之间放置空间
CSS margin
属性在任何已定义边界之外的元素周围创建空间。margin 属性结合了四个属性:margin-top
、margin-bottom
、margin-left
和 margin-right
。
margin-top
属性在元素的顶部创建空间。同样,margin-bottom
、margin-right
和 margin-left
属性在元素的底部、右侧和左侧创建空间。
我们可以使用第一个按钮元素的 margin-right
属性在按钮之间创建一个空间。
结果,将在按钮右侧创建一定宽度的边距。然后,另一个按钮将位于边距旁边。
例如,使用 button
标签和名称 Button 1
和 Button 2
创建两个按钮。将按钮的类别设置为 B1
和 B2
。
在 CSS 中,选择 B1
类并将其 margin-right
属性设置为 4px
。这将在 Button 1
右侧创建一个 4px
空间,在两个按钮之间创建一个空间。
示例代码:
<button class="B1">
Button1
</button>
<button class="B2">
Button2
</button>
.B1 {
margin-right: 4px;
}
在 HTML 中使用 margin-right
属性和 not(:last-child)
选择器的多个按钮之间提供空间
我们可以使用 margin-right
属性和 CSS not()
选择器在多个按钮之间田间空间。这种方法背后的逻辑是我们将使用 margin-right
属性在每个按钮之间创建空间,就像在第二种方法中一样。
但是,我们不会在最后一个按钮之后创建空格。
为此,我们将使用 not()
选择器。在里面,not 选择器,我们可以使用:last-child
。
:last-child
选择器表示容器内的最后一个孩子。作为一个整体,我们可以应用以下规则来应用样式。
.container>.button:not(:last-child){
}
>
符号选择 container
内的每个子项。结果,样式将应用于父 container
内具有类 button
的所有子代,除了最后一个子代。
例如,创建一个 div
并给它一个 container
类。
在 div
中,创建三个按钮并将它们命名为 Button 1
、Button 2
和 Button 3
。此外,将 button
设置为每个按钮的类。
现在,使用上面提到的规则在 CSS 中设置样式。在规则内部,使用 margin-right
属性并将其设置为 10px
以在子元素或按钮之间添加空间 10px
。
下面的例子显示三个按钮之间有一个 10px
的空间。
示例代码:
<div class='container'>
<button class='button'>Button 1</button>
<button class='button'>Button 2</button>
<button class='button'>Button 3</button>
</div>
.container>.button:not(:last-child) {
margin-right: 10px;
}
Subodh is a proactive software engineer, specialized in fintech industry and a writer who loves to express his software development learnings and set of skills through blogs and articles.
LinkedIn