資料結構
網路
RDBMS
作業系統
Java
MS Excel
iOS
HTML
CSS
Android
Python
C 程式設計
C++
C#
MongoDB
MySQL
Javascript
PHP
物理
化學
生物
數學
英語
經濟學
心理學
社會研究
時裝研究
法學研究CSS 中的 margin 簡寫屬性
CSS margin 簡寫屬性用於定義元素的 margin 區域。它沿順時針方向設定值，即 margin-top、margin-right、margin-bottom 然後是 margin-left。
語法
CSS margin 屬性的語法如下 −
Selector {
margin: /*value*/
}
上述值可以是 −
margin-top
margin-right
margin-bottom
margin-left
以下示例說明了 CSS margin 簡寫屬性 −
具有所有值 margin 屬性
具有所有值的 margin 屬性為頂部、右側、底部和左側屬性設定值 −
margin: 7% auto -3% 25%;
示例
讓我們看一個示例 −
<!DOCTYPE html>
<html>
<head>
<style>
div {
margin: 7% auto -3% 25%;
width: 40px;
height: 40px;
padding: 0.9rem;
box-shadow: inset 0 0 50px turquoise;
border: thin solid;
}
div > div {
border-top-right-radius: 100px;
border-bottom-right-radius: 500px;
border-top-left-radius: 30px;
box-shadow: inset 0 0 6px navy;
}
div > div > div {
padding: 0.3em;
margin: 2px -40px;
box-shadow: inset 0 0 16px orange;
border-radius: 50%;
}
#one {
padding: 50px;
border-radius: 10px;
}
</style>
</head>
<body>
<div id="one">
<div>
<div></div>
</div>
</div>
</body>
</html>
具有單個值的 margin 屬性
具有單個值的 margin 屬性為頂部、底部、左側和右側的所有屬性設定相同的值 −
p.demo {
margin: 30px;
}
示例
讓我們看一個示例 −
<!DOCTYPE html>
<html>
<head>
<style>
p.demo {
margin: 30px;
}
</style>
</head>
<body>
<h1>Demo Heading</h1>
<p>This is a demo text.</p>
<p class="demo">This is another demo text.</p>
<p>Another demo text</p>
<h2>Demo Heading2</h2>
<p>Demo text</p>
</body>
</html>
具有兩個值的 margin 屬性
具有兩個值的 margin 屬性，即頂部和底部 margin 為 2em 以下。左側和右側屬性為 1em −
margin: 2em 1em;
示例
讓我們看一個示例 −
<!DOCTYPE html>
<html>
<head>
<style>
article {
margin: 2em 1em;
background-color: bisque;
}
span {
margin: -23% 83%;
border-left: dashed;
background-image: linear-gradient(to right, lightgreen, forestgreen);
font-size: 1.4em;
font-style: italic;
}
</style>
</head>
<body>
<h2>What is Spring Framework?</h2>
<article>
Spring framework is an open source Java platform. It was initially written by Rod Johnson and was first released under the Apache 2.0 license in June 2003.<span> Spring is lightweight when it comes to size and transparency. The basic version of Spring framework is around 2MB.</span>
</article>
</body>
</html>
具有三個值的 margin 屬性
使用單個值的邊距屬性將上邊距設定為 35px，左右邊距設定為 70px。底部邊距設定為 50px -
p.demo {
margin: 35px 70px 50px;
}
示例
讓我們看一個示例 −
<!DOCTYPE html>
<html>
<head>
<style>
p.demo {
margin: 35px 70px 50px;
}
</style>
</head>
<body>
<h1>Demo Heading</h1>
<p>This is a demo text.</p>
<p class="demo">This is another demo text.</p>
<p>Another demo text</p>
<h2>Demo Heading2</h2>
<p>Demo text</p>
</body>
</html>
更新於: 2023 年 12 月 29 日
2 千餘次瀏覽
廣告