在给左右边距后，如何使 div 填充整个可能的宽度？答案

【问题标题】：How can I make a div fill the whole possible width after giving margins both to left and right?在给左右边距后，如何使 div 填充整个可能的宽度？
【发布时间】：2021-08-17 18:21:21
【问题描述】：

我正在尝试让 div 在其边距生效后填充可能的位置。

例如，如果屏幕宽度为 200，并且类声明如下：

.mini_video {
  width: 100%;
  margin-left: 20px;
  margin-right: 20px;
}

mini_video 可以有 160px 的宽度并且在中间吗？

如果它对我有任何帮助，我也在使用 Bootstrap。

【问题讨论】：

改用填充

标签： html css reactjs bootstrap-4

【解决方案1】：

我会在这个用例中使用填充。您可以使用外部容器并为视频添加填充。视频适合对象允许它逐渐缩放。

.mini_video-container {
  width: 100%;
  padding: 0 20px;
  max-width: 1000px;
  background-color: orange;
}
video {
  width: 100%;
  height: 100%;
  max-width: 100%;
  object-fit: fill;
}

https://codepen.io/jeffteachestheweb/pen/abJVNjg

【讨论】：

为什么？为什么填充比边距更好？为什么保证金不起作用？为什么是height: 100%？为什么1000px？

【解决方案2】：

您可以添加max-width: 100%; 而不是width: 100%;

.mini_video {
  max-width: 100%;
  margin-left: 20px;
  margin-right: 20px; 
}

看看那个例子

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
.mini_video {
  max-width: 100%;
  margin-left: 20px;
  margin-right: 20px;
  border: 1px solid #000;
  text-align: center;
}

&lt;div class="mini_video"&gt;Hello World&lt;/div&gt;

【讨论】：