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

CSSパディングボックス値

CSSのbackground-originプロパティを使用して、padding-boxの値を設定します。パディングボックスの値を使用すると、背景画像はパディングエッジの左上隅から始まります。

次のコードを実行して、パディングボックスの値を実装してみてください。

例

<!DOCTYPE html>
<html>
   <head>
      <style>
         #value1 {
            border: 3px solid blue;
            padding: 30px;
            background: url(https://www.tutorialspoint.com/assets/videotutorials/courses/html_online_training/380_course_216_image.jpg);
            background-repeat: no-repeat;
            background-origin: padding-box;
         }
         #value2 {
            border: 3px solid orange;
            padding: 30px;
            background: url(https://www.tutorialspoint.com/assets/videotutorials/courses/html_online_training/380_course_216_image.jpg);
            background-repeat: no-repeat;
            background-origin: border-box;
         }
         #value3 {
            border: 3px dashed yellow;
            padding: 30px;
            background: url(https://www.tutorialspoint.com/assets/videotutorials/courses/html_online_training/380_course_216_image.jpg);
            background-repeat: no-repeat;
            background-origin: content-box;
         }
      </style>
   </head>
   <body>
      <h1>padding-box value</h1>
      <div id = "value1">
         <h2>Heading 2</h2>
         <p>This is demo text. This is demo text. This is demo text. This is demo text. This is demo text. This is demo text. This is demo text. This is demo text. This is demo text.</p>
         <h3>Heading 3</h3>
         This is demo text. This is demo text. This is demo text. This is demo text. This is demo text. This is demo text. This is demo text.</p>
      </div>
      <h1>border-box value</h1>
      <div id = "value2">
         <h2>Heading 2</h2>
         <p>This is demo text. This is demo text. This is demo text. This is demo text. This is demo text. This is demo text. This is demo text. This is demo text. This is demo text.
         <h3>Heading 3</h3>
            This is demo text. This is demo text. This is demo text. This is demo text. This is demo text. This is demo text. This is demo text.</p>
      </div>
      <h1>content-box value</h1>
      <div id = "value3">
         <h2>Heading 2</h2>
         <p>This is demo text. This is demo text. This is demo text. This is demo text. This is demo text. This is demo text. This is demo text. This is demo text. This is demo text.
         <h3>Heading 3</h3>
            This is demo text. This is demo text. This is demo text. This is demo text. This is demo text. This is demo text. This is demo text.</p>
      </div>
   </body>
</html>

  1. CSSの権利プロパティ

    rightプロパティは、要素の水平位置を設定するために使用されます。 −として設定されます right: auto|length|initial|inherit; 例 CSSで適切なプロパティを実装する例を見てみましょう- <!DOCTYPE html> <html> <head> <style> div {    text-align: justify;    text-justify: inter-word;    color: white;    backgr

  2. CSSを使用したテキストのインデント

    テキストのインデントには、CSSのtext-indentプロパティを使用します。これは、段落の最初の行をインデントするためのものです。 例 例を見てみましょう- <!DOCTYPE html> <html> <head> <style> div {    text-indent: 30px; } </style> </head> <body> <h1>Demo Heading</h1> <div> <p>This is demo text.