数据结构
网络
关系数据库管理系统
操作系统
Java
MS Excel
iOS
HTML
CSS
Android
Python
C 语言编程
C++
C#
MongoDB
MySQL
Javascript
PHP
物理学
化学
生物学
数学
英语
经济学
心理学
社会学
服装设计
法律研究如何在同一行中两个对象之间添加空格？
使用 Margin 和 Padding 属性
可以在任何 HTML 元素的顶部、右侧、底部或左侧添加额外的间距。但是，在决定在元素或对象周围添加哪种类型的间距之前，了解 margin 和 padding 之间的区别非常重要。Padding 用于围绕边框内的元素，而 margin 用于围绕边框外的元素。
margin 属性指定 HTML 元素周围的空间量。我们可以使用负值来重叠内容。子元素不会继承 margin 属性的值。但是，我们必须记住，顶部和底部的垂直 margin 将合并为一个，因此块之间的距离将仅与两个 margin 中的相同大小或较大者相同，如果两者相等。
以下属性可用于设置元素的 margin。
在单个声明中设置多个 margin 属性时，margin 指定一个简写属性。
margin-bottom 属性描述元素的底部 margin。
元素的顶部 margin 由margin-top 属性定义。
margin-left 属性指定元素的左侧 margin。
margin-right 属性指定元素的右侧 margin。
padding 属性指定元素的内容与其边框之间应显示多少空间。此属性的值应为长度、百分比或单词 inherit。如果该值为可继承的，它将继承其父元素的 padding。如果使用百分比，则它是包含它的框的百分比。
下面列出的 CSS 属性可用于控制列表。我们还可以使用以下属性更改框每一侧的 padding。
padding-bottom 属性指定元素的底部 padding。
padding-top 属性指定元素的顶部 padding。
padding-left 属性指定元素的左侧 padding。
padding-right 属性指定元素的右侧 padding。
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>
301 次查看
