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

CSSで個々の辺のパディングを定義する

CSSを使用すると、要素にサイド固有のパディングを設定できます。 padding-top、padding-right、padding-bottom、およびpadding-rightプロパティは、それぞれ上、右、下、および左のパディングを定義します。パディングの省略形プロパティを使用して、時計回りに値を指定することで同じ出力を実現することもできます。

構文

CSSパディングプロパティの構文は次のとおりです-

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

次の例は、リストのスタイル設定を示しています-

例

<!DOCTYPE html>
<html>
<head>
<style>
article {
   margin: 2em 1em;
   padding: 3%;
   background-color: plum;
   letter-spacing: 0.05em;
}
span {
   padding: 0 53%;
   border-right: dashed;
   background-image: linear-gradient(to right, lavenderblush, lightblue);
   font-size: 1.4em;
   font-style: italic;
}
</style>
</head>
<body>
<h2>What is Xamarin?</h2>
<article>
<span>Xamarin is a software company based in San Francisco. Xamarin is built on the .NET Framework.</span> It provides commercial software development tools that allow a user to develop applications for Android, iOS and Windows using C# language and the .NET framework.
</article>
</body>
</html>

出力

CSSで個々の辺のパディングを定義する

例

<!DOCTYPE html>
<html>
<head>
<style>
div {
   max-width: 400px;
   padding-left: 30px;
   padding-top: 44px;
   padding-bottom: 60px;
   background-image: linear-gradient(to bottom, oldlace, lightblue);
   border: thin solid;
   text-align: center;
}
div > div {
   padding-right: 70px;
}
</style>
</head>
<body>
<h2>Swift programming language by Apple</h2>
<div>Swift is a programming language developed by Apple Inc for iOS and OS X development.
<div>Swift 4 uses the same runtime as the existing Obj-C system on Mac OS and iOS, which enables Swift 4 programs to run on many existing iOS 6 and OS X 10.8 platforms.
</div>
</div>
</body>
</html>

出力

CSSで個々の辺のパディングを定義する


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

    マージンについては、CSSマージンプロパティを使用します。 marginプロパティは、HTML要素の周囲のスペースを定義します。 パディングの場合、パディングプロパティを使用すると、要素のコンテンツとその境界線の間に表示するスペースの量を指定できます。 以下は、CSSでマージンとパディングを表示するコードです- 例 <!DOCTYPE html> <html> <head> <style> body {    font-family: "Segoe UI", Tahoma, Geneva, Verdan

  2. CSSを使用したHTMLビデオのアスペクト比の維持

    要素のパディングをパーセンテージで指定することで、アスペクト比を維持できます。 これには、CSSパディングプロパティ-を使用します パディングボトム 要素の下部のパディングを指定します。 パディングトップ 要素の上部のパディングを指定します。 パディング-左 要素の左パディングを指定します。 パディング-右 要素の右パディングを指定します。 パディング 前述のプロパティの省略形として機能します。 例 次の例は、アスペクト比を維持するためのCSSパディングプロパティを示しています。 <!DOCTYPE html> <html> <