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

CSSのマージン短縮プロパティ

CSSのmarginshorthandプロパティは、要素のマージン領域を定義するために使用されます。時計回りに値を設定します。つまり、margin-top、margin-right、margin-bottom、margin-leftの順に設定します。

構文

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

Selector {
   margin: /*value*/
}

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

を示しています。

例

<!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>

出力

CSSのマージン短縮プロパティ

例

<!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>

出力

CSSのマージン短縮プロパティ


  1. CSSのShorthandプロパティの概要

    アウトラインの省略形プロパティは、要素の境界の周りに特定のスタイル（必須）、太さ、色の線を描画するように定義できますが、アウトラインは、境界プロパティとは異なり、要素の寸法の一部ではありません。 構文 CSSアウトラインShorthandプロパティの構文は次のとおりです- Selector {    outline: /*value*/ } 例 概要の速記の例を見てみましょう プロパティ- <!DOCTYPE html> <html> <head> <title>CSS outline Shorthand</titl

  2. CSSのborder-styleプロパティ

    CSS border-styleプロパティは、要素の境界線スタイルを指定するために使用されます。また、border-topスタイル、border-rightスタイル、border-leftスタイル、border-rightスタイルのプロパティを使用して、個々の辺の境界線スタイルを定義することもできます。 構文 CSSボーダープロパティの構文は次のとおりです- Selector {    border: /*value*/ } 次の例は、CSSボーダースタイルのプロパティ-を示しています。 例 <!DOCTYPE html> <html> <