Элементы, не идеально вписывающиеся в контейнер - ProgramBox

ProgramBox

Элементы, не идеально вписывающиеся в контейнер

Post author:admin
Запись опубликована:22 января, 2022
Post category:Вопросы по программированию

#html #css

Вопрос:

 <!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Flex Box</title>
<link rel="stylesheet" href="">
<style>
html,
body {
margin: 0;
padding: 0;
width: 100%;
}
.container {
width: 90vw;
height: 90vh;
margin: 10px auto;
display: flex;
flex-direction: row;
justify-content: space-between;
align-items: stretch;
border: 10px solid black;
}
.box {
width: 100px;
font-size: 50px;
color: #fff;
text-align: center;
padding: 10px;
box-sizing: border-box;
}
.box-1 {
background: darkblue;
}
.box-2 {
background: darkcyan;
}
.box-3 {
background: darkgoldenrod;
}
.box-4 {
background: darkmagenta;
}
</style>
</head>
<body>
<div class="container">
<div class="box box-1">1</div>
<div class="box box-2">2</div>
<div class="box box-3">3</div>
<div class="box box-4">4</div>
</div>
</body>
</html>

Всем привет! Я изучал flex box, но у меня возникли проблемы с этим конкретным примером. Между границей и элементами есть тонкое белое пространство, похожее на тонкое поле. Я не знаю, почему он там и как его удалить. Кто-нибудь может мне помочь, пожалуйста?

ПРАВКА: Я не имею в виду пространство между свойствами, я этого хочу, но есть тонкое поле, идущее сверху вниз, слева и справа, которого там быть не должно

Ответ №1:

Если вы хотите удалить промежутки между ними, ваше дочернее поле div должно составлять 1/4 ширины родительского div , как показано ниже кода

 <!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Flex Box</title>
  <link rel="stylesheet" href="">
  <style>
    html,
    body {
      margin: 0;
      padding: 0;
      width: 100%;
    }
    
    .container {
      width: 90vw;
      height: 90vh;
      margin: 10px auto;
      display: flex;
      flex-direction: row;
      justify-content: space-between;
      align-items: stretch;
      border: 10px solid black;
    }
    
    .box {
      width: 25%;
      font-size: 50px;
      color: #fff;
      text-align: center;
      padding: 10px;
      box-sizing: border-box;
    }
    
    .box-1 {
      background: darkblue;
    }
    
    .box-2 {
      background: darkcyan;
    }
    
    .box-3 {
      background: darkgoldenrod;
    }
    
    .box-4 {
      background: darkmagenta;
    }
  </style>
</head>

<body>
  <div class="container">
    <div class="box box-1">1</div>
    <div class="box box-2">2</div>
    <div class="box box-3">3</div>
    <div class="box box-4">4</div>
  </div>
</body>

</html>

Ответ №2:

Это то, чего ты хочешь?

 *{ /*Don't mind this, this is in place of your body style*/
margin:0;
padding:0;
}
.container {
box-sizing:border-box;
width: 100vw;
height: 100vh;
/* margin: 10px auto; This the one causing it to be surrounded by a white border*/
display: flex;
flex-direction: row;
/*justify-content: space-between; TAKE THIS OUT*/
align-items: stretch;
border: 10px solid black;
}
.box {
width: 100px;
font-size: 50px;
color: #fff;
text-align: center;
padding: 10px;
box-sizing: border-box;
flex-grow:1; /* ADD THIS IN */
}
.box-1 {
background: darkblue;
}
.box-2 {
background: darkcyan;
}
.box-3 {
background: darkgoldenrod;
}
.box-4 {
background: darkmagenta;
}

 <div class="container">
<div class="box box-1">1</div>
<div class="box box-2">2</div>
<div class="box box-3">3</div>
<div class="box box-4">4</div>

Комментарии:

1. Но я имею в виду не пространство между ними, а тонкое пространство вокруг, а также сверху вниз. Как и незначительное поле, оно все еще видно.

2. У вашего контейнера есть поля вокруг.

Метки: не идеально вписывающиеся в контейнер, Элементы