Неправильный margin в css

189

07 июля 2019, 07:30

Возникла проблема при заполнении контейнера в css.

Ширина блока div класса right / left = 40% от родителя div с id, margin по ширине = 5% padding / border нет.

Всего два блока, т.е. 40% * 2 + 5% * 4 = 100%, казалось бы, контейнер заполнен по ширине полностью, но на практике 2ой блок вылезает за его границы. При этом, css не считает, что это overflow. Как можно это исправить, при том, что блоки должны быть равны и полностью помещаться в родительский контейнер?.

В Google решения не нашёл. js привязал чтобы можно было посмотреть весь сайт.

//variables_________________________________________________ 
var body = document.getElementsByTagName("body")[0]; //body 
var blocks = [document.getElementById("_1"), document.getElementById("_2"), document.getElementById("_3"), document.getElementById("_4"), document.getElementById("_5")] // элементы, обозначающие слои 
var currentLayer = 1; // текущий слой 
var lastRotate = 0; //для колёсика 
//commands__________________________________________________ 
makeDeep(blocks, currentLayer); //стартовое определение 
body.addEventListener("wheel", onWheel); 
//functions_________________________________________________ 
function makeDeep(elements, currentLayer) { //функция на определения видимости слоёв 
 
  for (var i = 0; i < elements.length; i++) { //цикл по элементам на определение видимости 
 
    var zindex = 6 - getStyle(elements[i], "z-index"); // получам z-индекс элемента 
 
    if (zindex < currentLayer) { //проверка на текущий слой 
      elements[i].style.display = "none"; //включаем невидимость невидимых слоёв 
    } 
    if (zindex >= currentLayer) { //проверка на текущий слой 
      elements[i].style.display = "block"; //включаем видимость видимых слоёв 
    } 
 
  } 
  var classCounter = 1; 
  for (var i = currentLayer - 1; i < elements.length; i++) { //цикл по элементам на определение класса элемента 
    elements[i].className = "_" + classCounter; 
    classCounter += 1; 
  } 
} 
 
function getStyle(el, styleProp) { //получаем з-индекс Элемента 
  var x = el; 
 
  if (window.getComputedStyle) { 
    var y = document.defaultView.getComputedStyle(x, null).getPropertyValue(styleProp); 
  } else if (x.currentStyle) { 
    var y = x.currentStyle[styleProp]; 
  } 
 
  return y; 
} 
 
function onWheel(event) { 
  if (event.deltaY < lastRotate) { 
    if (currentLayer < 5) { 
      currentLayer += 1; 
    } 
  } 
  if (event.deltaY > lastRotate) { 
    if (currentLayer > 1) { 
      currentLayer -= 1; 
    } 
  } 
  makeDeep(blocks, currentLayer); 
}

body { 
  background-color: gray; 
  margin: 0; 
  height: 100%; 
  width: 100%; 
} 
 
html { 
  height: 100%; 
  width: 100%; 
} 
 
#_1 { 
  z-index: 5; 
} 
 
#_2 { 
  z-index: 4; 
} 
 
#_3 { 
  z-index: 3; 
} 
 
#_4 { 
  z-index: 2; 
} 
 
#_5 { 
  z-index: 1; 
} 
 
#_1, 
#_2, 
#_3, 
#_4, 
#_5 { 
  position: fixed; 
} 
 
div>div { 
  color: green; 
  font-size: 2em; 
  padding: 1%; 
  display: inline-block; 
  background-color: rgba(50, 50, 50, 0.9); 
  margin: 5%; 
  height: 90%; 
  width: 40%; 
} 
 
._1 { 
  height: 100%; 
  width: 100%; 
  transition: all 1s; 
} 
 
._2 { 
  height: 80%; 
  width: 80%; 
  margin-top: 10%; 
  margin-left: 10%; 
  transition: all 1s; 
} 
 
._3 { 
  height: 60%; 
  width: 60%; 
  margin-top: 20%; 
  margin-left: 20%; 
  transition: all 1s; 
} 
 
._4 { 
  height: 40%; 
  width: 40%; 
  margin-top: 30%; 
  margin-left: 30%; 
  transition: all 1s; 
} 
 
._5 { 
  height: 20%; 
  width: 20%; 
  margin-top: 40%; 
  margin-left: 40%; 
  transition: all 1s; 
}

<link href="https://fonts.googleapis.com/css?family=Major+Mono+Display" rel="stylesheet"> 
 
<div id="_1"> 
  <div class="left"></div> 
  <div class="right"></div> 
</div> 
 
<div id="_2"> 
  <div class="left"></div> 
  <div class="right"></div> 
</div> 
 
<div id="_3"> 
  <div class="left"></div> 
  <div class="right"></div> 
</div> 
 
<div id="_4"> 
  <div class="left"></div> 
  <div class="right"></div> 
</div> 
 
<div id="_5"> 
  <div class="left"></div> 
  <div class="right"></div> 
</div>

Answer 1

Вы считаете margin, но забыли о padding.

В селектор div > div и .block.

Добавил свойство box-sizing: border-box, что бы padding был частью ширины блока (box model).
Обнулил font-size, что бы убрать "белое пространство" между элементами с свойством display: inline-block.
Уменьшил ширину, так как использование отступов в % не всегда дает нужный результ. (Использование отступов в % нежелательно).

//variables_________________________________________________ 
var body = document.getElementsByTagName("body")[0]; //body 
var blocks = [document.getElementById("_1"), document.getElementById("_2"), document.getElementById("_3"), document.getElementById("_4"), document.getElementById("_5")] // элементы, обозначающие слои 
var currentLayer = 1; // текущий слой 
var lastRotate = 0; //для колёсика 
//commands__________________________________________________ 
makeDeep(blocks, currentLayer); //стартовое определение 
body.addEventListener("wheel", onWheel); 
//functions_________________________________________________ 
function makeDeep(elements, currentLayer) { //функция на определения видимости слоёв 
 
  for (var i = 0; i < elements.length; i++) { //цикл по элементам на определение видимости 
 
    var zindex = 6 - getStyle(elements[i], "z-index"); // получам z-индекс элемента 
 
    if (zindex < currentLayer) { //проверка на текущий слой 
      elements[i].style.display = "none"; //включаем невидимость невидимых слоёв 
    } 
    if (zindex >= currentLayer) { //проверка на текущий слой 
      elements[i].style.display = "block"; //включаем видимость видимых слоёв 
    } 
 
  } 
  var classCounter = 1; 
  for (var i = currentLayer - 1; i < elements.length; i++) { //цикл по элементам на определение класса элемента 
    elements[i].className = "_" + classCounter; 
    classCounter += 1; 
  } 
} 
 
function getStyle(el, styleProp) { //получаем з-индекс Элемента 
  var x = el; 
 
  if (window.getComputedStyle) { 
    var y = document.defaultView.getComputedStyle(x, null).getPropertyValue(styleProp); 
  } else if (x.currentStyle) { 
    var y = x.currentStyle[styleProp]; 
  } 
 
  return y; 
} 
 
function onWheel(event) { 
  if (event.deltaY < lastRotate) { 
    if (currentLayer < 5) { 
      currentLayer += 1; 
    } 
  } 
  if (event.deltaY > lastRotate) { 
    if (currentLayer > 1) { 
      currentLayer -= 1; 
    } 
  } 
  makeDeep(blocks, currentLayer); 
}

body { 
  background-color: gray; 
  margin: 0; 
  height: 100%; 
  width: 100%; 
} 
 
html { 
  height: 100%; 
  width: 100%; 
} 
 
#_1 { 
  z-index: 5; 
} 
 
#_2 { 
  z-index: 4; 
} 
 
#_3 { 
  z-index: 3; 
} 
 
#_4 { 
  z-index: 2; 
} 
 
#_5 { 
  z-index: 1; 
} 
 
#_1, 
#_2, 
#_3, 
#_4, 
#_5 { 
  position: fixed; 
} 
 
.block { 
  font-size: 0; 
} 
 
div>div { 
  color: green; 
  font-size: 2em; 
  padding: 1%; 
  display: inline-block; 
  background-color: rgba(50, 50, 50, 0.9); 
  margin: 5%; 
  height: 90%; 
  width: 40%; 
   
  /*UPD.*/ 
  width: 39.2%; 
  box-sizing: border-box; 
} 
 
._1 { 
  height: 100%; 
  width: 100%; 
  transition: all 1s; 
} 
 
._2 { 
  height: 80%; 
  width: 80%; 
  margin-top: 10%; 
  margin-left: 10%; 
  transition: all 1s; 
} 
 
._3 { 
  height: 60%; 
  width: 60%; 
  margin-top: 20%; 
  margin-left: 20%; 
  transition: all 1s; 
} 
 
._4 { 
  height: 40%; 
  width: 40%; 
  margin-top: 30%; 
  margin-left: 30%; 
  transition: all 1s; 
} 
 
._5 { 
  height: 20%; 
  width: 20%; 
  margin-top: 40%; 
  margin-left: 40%; 
  transition: all 1s; 
}

<div id="_1" class="block"> 
  <div class="left"></div> 
  <div class="right"></div> 
</div> 
 
<div id="_2" class="block"> 
  <div class="left"></div> 
  <div class="right"></div> 
</div> 
 
<div id="_3" class="block"> 
  <div class="left"></div> 
  <div class="right"></div> 
</div> 
 
<div id="_4" class="block"> 
  <div class="left"></div> 
  <div class="right"></div> 
</div> 
 
<div id="_5" class="block"> 
  <div class="left"></div> 
  <div class="right"></div> 
</div>

Answer 2

Можно сделать вот так:

css

.container {
      width: 90%;
      max-width: 1200px;
      margin: 0 auto;
      padding: 50px 0;
      display: grid;
      grid-template-columns: 1fr 1fr;
      background: #cecece;
      justify-items: center;
    }
    .inner-block {
      width: 80%;
      border: 2px solid #fff;
      color: #fff;
      font-size: 40px;
      line-height: 50px;
      text-align: center;
    }

разметка

<div class="container">
    <div class="inner-block">Left Block</div>
    <div class="inner-block">Right Block</div>
  </div>

ПОСЛЕДНИЕ ВОПРОСЫ

Все вопросы

ТОП-10

Все популярные вопросы

Неправильный margin в css

Работа с элементом, который вложен в другой

Почему методы доступа {get;set;} с маленькой буквы

Как проверить пароль в смарт-карте?

Сравнение двух List на одинаковые элементы