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

CSSのパディングの省略形プロパティ

CSSのpaddingプロパティを使用すると、padding-top、padding-right、padding-bottom、padding-leftのパディングを設定できます。略記です。

最初に例を見てみましょう-

例：パディング：10px 5px 7px 10px;

ここで

top padding is 10px
right padding is 5px
bottom padding is 7px
left padding is 10px

例

次の例は、CSSパディングプロパティ-

を示しています。 
<!DOCTYPE html>
<html>
<head>
<style>
div {
   height: 150px;
   width: 300px;
   padding: 5% 10% 20% 5%;
   background-image: url("https://www.tutorialspoint.com/images/home_tensor_flow.png");
   text-align: center;
   font-weight: bold;
   font-size: 1.2em;
   box-sizing: border-box;
}
div > div {
   border-radius: 80px;
   padding: 2em 2em;
   box-shadow: 0 0 4px 0.8px black;
}
</style>
</head>
<body>
<div>Learn TensorFlow
<div>TensorFlow is an open source machine learning framework for all developers.</div>
</div>
</body>
</html>

出力

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

CSSのパディングの省略形プロパティ

例

<!DOCTYPE html>
<html>
<head>
<style>
div {
   height: 150px;
   width: 100px;
   padding: 5% 1%;
   background-color: papayawhip;
   border-radius: 5%;
   box-sizing: border-box;
}
div > div {
   width: 50px;
   height: 50px;
   border-radius: 50%;
   padding: 2em;
   box-shadow: 0 0 9px 1px black;
}
span {
   padding: 10px;
}
</style>
</head>
<body>
<div>
<div></div>
<span><i>button</i></span>
</div>
</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> <