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

CSSマージンプロパティ

CSSマージンプロパティは、margin-top、margin-right、margin-bottom、およびmargin-leftの省略形です。これにより、要素の周囲のスペースを指定できます。個々の辺にマージンを設定することもできます。

構文

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

Selector {
   margin: /*value*/
}

例

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

を示しています。 
<!DOCTYPE html>
<html>
<head>
<style>
div {
   margin: 10px 50px 20px;
   padding: 1rem;
   border: dashed;
}
p {
   text-align: center;
}
#demo {
   margin-left: -80px;
   box-shadow: inset 0 0 10px brown;
}
</style>
</head>
<body>
<div></div>
<p>This is demo text.</p>
<p id="demo">Another demo text.</p>
<p>This is new demo text.</p>
</body>
</html>

出力

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

CSSマージンプロパティ

例 
<!DOCTYPE html>
<html>
<head>
<style>
ul {
   margin: auto;
   background-image: linear-gradient(to right, khaki, aliceblue, skyblue, rebeccapurple);
   width: 20em;
}
li {
   margin-top: 3px;
}
li + li {
   margin-left: -20px;
}
li:last-child {
   margin-left: 75px;
}
</style>
</head>
<body>
<h2>Demo Heading</h2>
<ul>
<li>This is demo list item.</li>
<li>This is another list item with different style.</li>
<li>This is our third demo text with another style.
</li>
</ul>
</body>
</html>

概要

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

CSSマージンプロパティ


  1. CSSディメンションのプロパティ

    CSSの幅、高さ、最大高さなどのいくつかのプロパティを使用すると、ユーザーは要素コンテンツボックスのサイズを制御できます。 CSSのmax-heightプロパティの例を見てみましょう- 例 <!DOCTYPE html> <html> <head> <title>CSS max-height</title> <style> form {    width:70%;    margin: 0 auto;    text-align: center; } * { &

  2. CSSのフォントプロパティ

    CSSフォントのプロパティを使用すると、テキストの外観を変更できます。次のプロパティは、テキストのスタイル設定に役立ちます。 フォントファミリー このプロパティは、要素のフォント面を設定するために使用されます。 フォントカーニング 文字間隔を均一にし、読みやすさを向上させるために、フォントカーニングプロパティが使用されます。ただし、このプロパティはフォント固有です。 フォントサイズ font-sizeプロパティは、フォントのサイズを設定します。 フォントストレッチ 一部のフォントには、凝縮、太字などの追加の面があります。font-stretchプロパティは、これらを指定