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

CSSのマージンとパディング

マージンについては、CSSマージンプロパティを使用します。 marginプロパティは、HTML要素の周囲のスペースを定義します。

パディングの場合、パディングプロパティを使用すると、要素のコンテンツとその境界線の間に表示するスペースの量を指定できます。

以下は、CSSでマージンとパディングを表示するコードです-

例

<!DOCTYPE html>
<html>
<head>
<style>
body {
   font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
}
.outer-div {
   border: 2px solid purple;
   width: 300px;
   height: 200px;
}
.inner-div {
   border: 2px solid green;
   margin: 20px;
   padding-left: 20px;
}
</style>
</head>
<body>
<h1>Margin and padding example</h1>
<div class="outer-div">
<div class="inner-div">
Some sample text inside the inner div which will be padded by 20px all sides.
</div>
</div>
</body>
</html>

出力

上記のコードは次の出力を生成します-

CSSのマージンとパディング


  1. CSSの中央、水平、垂直方向の配置

    要素とそのコンテンツを水平、垂直、または中央に配置するためのさまざまなオプションを提供するCSSを使用して、要素またはその中のコンテンツを配置できます。 水平方向の配置 インライン要素 インライン要素またはテキスト、アンカー、スパンなどのインラインブロック要素は、CSStext-alignプロパティを使用して水平方向に整列できます。 ブロックレベルの要素 div、pなどのブロックレベルの要素は、CSSのmarginプロパティを使用して水平方向に配置できますが、要素の幅は、配置が不要になるため、親に対して100％であってはなりません。 フロートまたは位置スキームを使用したブロックレベル

  2. 疑似クラスとすべてのCSSクラス

    疑似クラスキーワードは、それが追加されるセレクターの特別な状態を指定するために使用されます。これにより、より詳細な制御が可能になり、ホバー、チェック、訪問などの特定の状態にあるセレクターをターゲットにできるようになりました。 以下は、CSSの疑似クラスを示すコードです- 例 <!DOCTYPE html> <html> <head> <style> body {    font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif; } a { &