如何在同一行中的两个对象之间添加空格?

htmlweb developmentfront end technology更新于 2025/3/29 23:40:17

使用边距 (Margin) 和内边距 (Padding) 属性

可以在任何 HTML 元素的顶部、右侧、底部或左侧添加额外的空格。但是，在决定在元素或对象周围添加哪种类型的空格之前，务必了解边距 (Margin) 和内边距 (Padding) 之间的区别。内边距用于围绕边框内的元素，而边距用于围绕边框外的元素。

margin 属性指定 HTML 元素周围的空格量。我们可以使用负值来重叠内容。子元素不会继承边距属性的值。但是，我们必须记住，顶部和底部的垂直边距会相互合并，因此块之间的距离只能是相同的大小，或者在两个边距相等的情况下取其中较大的一个。

以下属性可用于设置元素的边距。

在单个声明中设置多个边距属性时，边距指定为简写属性。
margin-bottom 属性描述元素的底部边距。
元素的顶部边距由 margin-top 属性定义。
margin-left 属性指定元素的左边距。
margin-right 属性指定元素的右边距。

padding 属性指定元素内容与其边框之间的间距。此属性的值可以是长度、百分比或"inherit"。如果值为"inheritable"，则元素将继承其父元素的填充。如果使用百分比，则填充值是包含该元素的框的百分比。

以下列出的 CSS 属性可用于控制列表。我们还可以使用以下属性来更改框两侧的填充。

padding-bottom 属性指定元素的底部填充。
padding-top 属性指定元素的顶部填充。
padding-left 属性指定元素的左侧填充。
padding-right 属性指定元素的右侧填充。
padding 是上面列出的属性的快捷方式。

示例

在此示例中，我们将使用 margin 和 padding 属性在位于一条水平线上的三个按钮之间创建空间。

<!DOCTYPE html>
<html>
<head>
    <title> How do you put space between two objects in the same row </title>
    <style>
        #container {
            height: 100px;
            width: 300px;
            background-color: seashell;
            padding: 10px;
        }
        p {
            font-size: 18px;
            font-weight: bold;
        }
        #btn1 {
            background-color: red;
        }
        #btn2 {
            background-color: green;
        }
        #btn3 {
            background-color: blue;
        }
        #btn1, #btn2, #btn3 {
            color: white;
            font-weight: 555;
            padding: 5px;
            margin-left: 30px;
        }
    </style>
</head>
<body>
    <div id= "container">
        <p id= "para"> This text is capable of changing color. </p>
        <div id= "btn">
            <button type= "button" id= "btn1" onclick="changeToRed()"> RED </button>
            <button type= "button" id= "btn2" onclick= "changeToGreen()"> GREEN </button>
            <button type=  "button" id= "btn3" onclick= "changeToBlue()"> BLUE </button>
        </div>
    </div>
    <script>
        function changeToRed() {
            document.getElementById("para").style.color= "red";
        }
        function changeToGreen() {
            document.getElementById("para").style.color= "green"
        }
        function changeToBlue() {
            document.getElementById("para").style.color= "blue"
        }
    </script>
</body>
</html>

使用 Column-Gap 属性

column-gap CSS 属性指定元素列之间间距(空间)的宽度。它采用以下任意值。

Normal:列与列之间使用浏览器的默认间距。对于多列布局，该间距指定为 1em。对于所有其他布局类型，该间距为 0。
<length>:列间距的宽度，以长度表示。<length> 属性必须为非负值。
<percentage>:列间距的宽度，以百分比表示。<percentage> 的值必须为非负值。属性必须为非负数。

示例

在此示例中，我们将使用 column-gap 属性来提供弹性项目之间的空间。

<!DOCTYPE html>
<html>
<head>
    <title> How do you put space between two objects in the same row </title>
    <style>
        #container {
            height: 120px;
            width: 400px;
            background-color: lightseagreen;
            padding: 10px;
        }
        P {
            color: white;
            font-size: 20px;
            font-weight: bold;
        }
        button {
            background-color: mintcream;
            border: 0;
        }
        #btn {
            display: flex;
            column-gap: 20px;
        }
    </style>
</head>
<body>
    <div id= "container">
        <p id= "para"> We have used the column-gap property to create space between the buttons below. </p>
        <div id= "btn">
            <button type= "button"> Button 1 </button>
            <button type= "button"> Button 2 </button>
            <button type= "button"> Button 3 </button>
        </div>
    </div>
    </script>
</body>
</html>