資料結構
網路
關係資料庫管理系統
作業系統
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 次檢視
