CSS
 Computer >> コンピューター >  >> プログラミング >> CSS

CSSを使用して要素の周囲にマージンスペースを設定する

CSSのmarginプロパティは、選択した要素の境界の周りにマージン領域を設定するために使用されます。 marginプロパティは、margin-top、margin-right、margin-bottom、margin-leftの省略形です。

構文

CSSマージンプロパティの構文は次のとおりです-

Selector {
   margin: /*value*/
}

次の例は、CSSマージンプロパティ-

を示しています。

例

<!DOCTYPE html>
<html>
<head>
<style>
body * {
   display: flex;
   float: left;
   margin: 10px 15px;
   border: thin solid;
   text-align: center;
   width: 40%;
   border-radius: 5%;
   box-shadow: 0 0 4px 1px grey;
}
p {
   font-family: "Sim Sun", monospace;
   background-color: lightcyan;
}
div {
   font-family: Impact, cursive;
   background-color: lightgreen;
}
</style>
</head>
<body>
<p>First demo text</p>
<div>A demo line goes like this..</div>
</body>
</html>

出力

これにより、次の出力が得られます-

CSSを使用して要素の周囲にマージンスペースを設定する

例

<!DOCTYPE html>
<html>
<head>
<style>
table, table * {
   margin: 5% 30%;
   border: 12px double red;
   padding: 0.5rem;
   border-radius: 30px;
}
td:nth-child(even) {
   background-color: lightblue;
}
td:nth-child(odd) {
   background-color: lightgreen;
}
</style>
</head>
<body>
<table>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
</table>
</body>
</html>

出力

これにより、次の出力が得られます-

CSSを使用して要素の周囲にマージンスペースを設定する


  1. CSSを使用したクロスブラウザの不透明度の設定

    プロパティの不透明度は最新のソリューションであり、Firefox 0.9以降、Safari 2、Opera 9以降、IE 9以降、およびすべてのバージョンのChromeで機能します。 -moz-opacityプロパティは、0.9より古いFirefoxバージョンの不透明度プロパティです。–khtml-opacityプロパティは、1から始まるサファリバージョン用です。filterプロパティは、不透明度のような効果を与える5〜9のIEブラウザ用です。現代の不透明度のフォールバックとしてこれらすべての値を一緒に使用すると、すべてのブラウザで不透明度を使用できます。 以下は、CSSを使用してクロスブラ

  2. CSSで角度を使用して線形グラデーションの方向を設定する

    グラデーションの方向をより細かく制御するには、次の構文のように角度を定義します- background-image: linear-gradient(angle, color-stop1, color-stop2); 以下は、CSSで角度を使用して線形グラデーションの方向を設定するためのコードです- 例 <!DOCTYPE html> <html> <head> <style> body {    font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans