Не работает box-sizing: border-box

Question

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <link rel='stylesheet' href='assets/css/style.css'>
    <link href="https://fonts.googleapis.com/css2?family=Alata&family=Baloo+Tamma+2&display=swap" rel="stylesheet">
    <title>I love design</title>
</head>
<body>
    <div class='full_page'> 
            
    <div class='intro'>
        <div class="header">
                <h1>Design</h1>
            </div>  
    </div>

    </div>  
</body>
</html>

body {
    margin: 0;
}
h1 {
    font-family: 'Alata', sans-serif;
    font-size: 80px;
    margin: 0;
    
}
 
div.header {
    width: 900px;
    margin: 0 auto;
    text-align: center;
    padding-top: 400px;
        box-sizing: border-box;
}   

div.full_page {
    width: 100%;
    height: 100vh;
    background: url('../images/background_blur.jpg');
    background-size: cover;
}

div.intro {
    width: 900px;
    height: 900px;
    margin: 0 auto;
    background: url('../images/background.jpg');
    background-size: cover;

}

Answer 1

body {
  margin: 0;
}

div.h1 {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%,-50%);
}

div.h1 h1 {
  font-family: 'Alata', sans-serif;
  font-size: 80px;
}

div.header {
  position: relative;
  width: 900px;
  height: 900px;
  margin: 0 auto;
  text-align: center;
  padding-top: 400px;
  box-sizing: border-box;
}

div.full_page {
  width: 100%;
  height: 900px;
  background: green;
}

div.intro {
  width: 900px;
  height: 900px;
  margin: 0 auto;
  background: red;
}

<link href="https://fonts.googleapis.com/css2?family=Alata&family=Baloo+Tamma+2&display=swap" rel="stylesheet">
<div class='full_page'>

  <div class='intro'>
    <div class="header">
      <div class="h1"><h1>Design</h1></div>
    </div>
  </div>

</div>

Если нужно, что бы блоки не выходили за границу окна и не появлялись скролы, то нужно использовать свойство overflow: hidden;.

Все размеры заданы в пикселях. Если нужно растянуть блок на всю ширину, то лучше его размер задавать 100% или 100vw. Какого расположения блоков вы пытаетесь добиться? Можно прикрепить фото?

Свойство box-sizing:border-box нужно, что бы padding или border не влияли на размер блока.

box-sizing:border-box нужно задавать для div.header, что бы он не увеличивался.

в div.header вставлен текст высотой 80px, именно на эти 80px блок и увеличивается! box-sizing: border-box влияет только на padding и border и не влияет на увеличение блока за счет вставленного в него текста, который расширяет его.

Текст можно вынести путем position: absolute;, тогда блок не будет увеличиваться

Answer 2

Используйте max-width. max-width означает: максимальная ширина элемента, т.е. она может становится меньше, если родительский контейнер будет ужимать блок.
width, это фиксированная ширина, которая не станет меньше

*,
*::before,
*::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

body, html {
  height: 100%;
}

h1 {
  font-family: 'Alata', sans-serif;
  font-size: 80px;
}

.container {
  max-width: 900px;
  margin: 0 auto;
  display: block;
  width: 100%;
  padding: 0 40px;
}

.full_page {
  width: 100%;
  min-height: 100%;
  background-color: green;
}

.design {
  background-color: red;
  align-items: center;
  display: flex;
  flex-direction: column;
  justify-content: center;
  min-height: 500px;
}

<link href="https://fonts.googleapis.com/css2?family=Alata&family=Baloo+Tamma+2&display=swap" rel="stylesheet">

<div class='full_page'>
  <div class="container">
    <h1 class="design">Design</h1>
  </div>
</div>

БЛОГ НА HUSL

Не работает box-sizing: border-box

Ответы (2 шт):