Граница и отступ в CSS - PullRequest
Новая
       21

Граница и отступ в CSS

1 голос
/ 07 марта 2020

Я пытаюсь понять точное соотношение между отступом и границей в CSS.

Было бы правильно сказать, что граница прозрачного цвета solid по сути то же самое, что и та же самая количество отступов, и можно ожидать, что они будут вести себя аналогично - за исключением того, что они будут сосуществовать на одном элементе, а не перезаписывать друг друга?

Другими словами, есть ли случаи, в которых: 

#Square1{
    padding: 50px;
}

, в случае замены на: 

#Square1{
    border-style: solid;
    border-width: 50px;
    border-color: transparent;
}

можно будет ожидать различного поведения любым значимым образом, за исключением , если что-то подобное было в том же файле CSS : 

.ClassThatSquare1HappensToHave{
    border-style: solid;
    border-width: 50px;
    border-color: transparent;
}

, в таком случае у вас получится вдвое больше пространства для заполнения / заполнения / расширения элементов?

Ответы [ 2 ]

3 голосов
/ 08 марта 2020

Может быть, это то, что вы ищете. Обратите внимание, что переполнение ведет себя по-разному как в отображаемом оставленном контенте (который обрезан по краю отступа), так и в положении полосы прокрутки, которая находится вне отступов, но внутри границы. 

#Square1{
    padding: 50px;
}

#Square2{
    border-style: solid;
    border-width: 50px;
    border-color: transparent;
}

body {
  width:400px;
}

div {
  background-color:lightblue;
  height:100px;
  overflow:auto;
}
<div id="Square1">
    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
  </div>
  <hr>
  <div id="Square2">
    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
  </div>
2 голосов
/ 08 марта 2020

Они оба относятся к CSS блочной модели, но служат разным целям.

В блочной модели :

SS

Область заполнения , ограниченная краем заполнения, расширяет область содержимого для включения заполнения элемента. Его размеры: ширина набивочного бокса и высота набивочного бокса . (...)

Область border , ограниченная краем границы, расширяет область заполнения, добавляя границы элемента. Его размеры: border-box width и border-box height (...)

Если свойство box-sizing имеет значение при значении border-box размер области границы можно явно определить с помощью свойств width, min-width, max-width, height, min-height и max-height.

С учетом вышесказанного вам следует использовать padding всякий раз, когда вы хотите указать внутреннее пространство, и использовать border, чтобы точно указать то, что он говорит - границу - линию, которая, если имеет padding, будет отображаться после padding площадь.

...