Руководство CSS Padding

View more Tutorials:

Pуководства CSS

CSS Padding
Padding делает элемент больше
Padding со значением процента

1- CSS Padding

Свойство (property) CSS Padding используется для создания пространства, окружающее содержание элемента и расположенно внутри границ (border) элемента, как в иллюстративном изображении ниже:

Вы можете предоставить 4 значения для CSS padding:

/* Syntax: */

padding: padding-top padding-right padding-bottom padding-left;

/* Example: */

padding:  5px 20px 30px 40px;

Вместо того, чтобы предоставить 4 значения для CSS padding вы можете использовать 4 свойства (property) CSS padding-top, padding-right, padding-bottom, padding-left.

padding-top: 5px;
padding-right: 20px;
padding-bottom: 30px;
padding-right: 40px;

Если вы предоставите CSS padding 2 значения, первое значение прикрепляется к padding-top & padding-bottom, второе значение прикрепляется к padding-right & padding-left.

Если вы предоставите CSS padding 3 значения, первое значение прикрепляется к padding-top, второе значение прикрепляется к padding-right & padding-left, третье значение прикрепляется к padding-bottom.

CSS padding принимает точные значения в единицах px, pt, cm, ... или процентах ( % ).

/* Apply to all four sides */
padding: 1em;

/* vertical | horizontal */
padding: 5% 10%;

/* top | horizontal | bottom */
padding: 1em 2em 2em;

/* top | right | bottom | left */
padding: 5px 1em 0 2em;

/* Global values */
padding: inherit;
padding: initial;
padding: unset;

2- Padding делает элемент больше

Присутствие CSS padding делает элемент больше своего размера без установки CSS padding.

Смотрите пример ниже:

padding-and-width-height.html

<!DOCTYPE html>
<html>

<head>
    <title>CSS Padding</title>
    <meta charset="UTF-8"/>
</head>

<body>

    <h3>CSS Padding</h3>


    <div style="width:200px; height:50px; border: 1px solid blue;">
        width:200px; height:80px;
    </div>

    <br/>

    <div style="width:200px; height:50px; padding: 20px; border: 1px solid red;">
        width:200px; height:80px; padding: 20px;
    </div>


</body>
</html>

Настоящий размер элемента, который вы видите расчитан используя следующую формулу:

realWidth = contentWidth + cssBorderWidthLeft + cssBorderWidthRight + cssPaddingLeft + cssPaddingRight

realHeight = contentHeight + cssBorderWidthTop + cssBorderWidthBottom + cssPaddingTop + cssPaddingBottom

В случаях по умолчанию contentWidth = cssWidth и contentHeight = cssHeight.

// By Default:

contentWidth = cssWidth
contentHeight = cssHeight

Использование CSS box-sizing:border-box не увеличивает размер элемента, когда вы используете CSS padding.

CSS box-sizing

3- Padding со значением процента

CSS padding принимает значение процента ( % ). Данное значение является процентом по сравнению с шириной Containing Block. При этом, Containing Block является ближайшим предком блочного уровния (block-level element) содержащего текущий элемент.

padding-percent-example.html

<!DOCTYPE html>
<html>
   <head>
      <title>CSS Padding</title>
      <meta charset="UTF-8"/>
      <script>
         function changeParentSize()  {
            var blockDiv = document.getElementById("blockDiv");

             // offsetWidth = cssWidth + padding + border
            var offsetWidth  = blockDiv.offsetWidth;
            if(offsetWidth > 300)  {
                offsetWidth = 200;
            }

            blockDiv.style.width = (offsetWidth+1) + "px";
         }

      </script>
   </head>

   <body>
      <h3>CSS Padding Percentage</h3>

      <div id="blockDiv" style="width:200px; height: 150px; border: 1px solid blue">
         I am a div (Block-Level Element)
         <span style="background-color: yellow;">
            I am a span (Inline Element)
            <div id= "redDiv" style="width:100px; padding:10%; border:1px solid red;">
               width:100px; padding:10%;
            </div>
         </span>
      </div>

      <br/>
      <button onClick="changeParentSize()">Change size of 'blockDiv'</button>
   </body>
</html>

View more Tutorials:

Pуководства CSS