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

CSSを使用して個々の辺のマージンを設定する

CSSを使用すると、要素の個々の側面の周囲のスペースを制御できます。 CSSのmarginプロパティは、margin-top、margin-right、margin-bottom、margin-leftのプロパティの省略形です。

構文

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

Selector {
   margin-top: /*value*/
   margin-right: /*value*/
   margin-bottom: /*value*/
   margin-left: /*value*/
}

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

を示しています。

例

<!DOCTYPE html>
<html>
<head>
<style>
div {
   margin-left: auto;
   margin-bottom: 4em;
   width: 30%;
   padding: 0.6rem;
   box-shadow: inset 0 0 3px turquoise;
   outline: thin dotted;
   text-align: center;
}
div + div {
   margin-right: 30%;
   box-shadow: inset 0 0 6px teal;
}
div + div + div {
   margin-left: 45%;
   margin-top: -190px;
   box-shadow: inset 0 0 6px orange;
}
</style>
</head>
<body>
<div>
This is demo text
</div>
<div>One (different margins)</div>
<div>Two (different margins)</div>
</body>
</html>

出力

CSSを使用して個々の辺のマージンを設定する

例

<!DOCTYPE html>
<html>
<head>
<style>
div {
   margin-top: 7%;
   margin-left: 25%;
   margin-bottom: -3em;
   width: 40px;
   height: 40px;
   padding: 0.6rem;
   box-shadow: inset 0 0 3px turquoise;
   border-top-right-radius: 100px;
}
div + div {
   margin-right: 30%;
   border-top-right-radius: unset;
   border-top-left-radius: 100px;
   box-shadow: inset 0 0 6px teal;
}
div + div + div {
   margin-left: 25%;
   margin-top: -140px;
   box-shadow: inset 0 0 6px orange;
   border-bottom-right-radius: 100px;
}
</style>
</head>
<body>
<div></div>
<div></div>
<div></div>
</body>
</html>

出力

CSSを使用して個々の辺のマージンを設定する


  1. CSSを使用した絶対測位

    CSSでの要素の配置を絶対値として定義できます。これにより、最初に配置された（静的を除く）親を基準にして要素がレンダリングされます。ポジショニング方法が絶対値である要素は、CSSポジショニングプロパティ（左、右、上、下）によって配置されます。 例 CSS絶対測位方法の例を見てみましょう- <!DOCTYPE html> <html> <head> <style> p {    margin: 0;    position: absolute;    top: 50%;   &

  2. CSSFlexboxでアイテムの固定幅を設定する

    構文 CSSflexプロパティの構文は次のとおりです- Selector {    flex: /*value*/ } 例 次の例は、CSSフレックスプロパティを示しています。 <!DOCTYPE html> <html>    <head>       <style>          div {             display: flex;