css 如何删除标记周围的填充

vwkv1x7d 于 2023-01-27 发布在其他

关注(0)|答案(3)|浏览(133)

我想减少左右的填充。
标志周围的空间太大，我希望父div立即包围子div的
这样，我可以更改父div的border属性，但不能减小“flag”周围的填充大小

.flex {
  display: flex;
  border-color: black;
  border: 5px;
  border-style: dashed;
  flex-direction: row;
  justify-content: center;
  padding: 0;
}

.box1 {
  height: 200px;
  width: 100px;
  background-color: green;
  border-radius: 40px 0 0 40px;
}

.box2 {
  height: 200px;
  width: 100px;
  background-color: whitesmoke;
}

.box3 {
  height: 200px;
  width: 100px;
  background-color: green;
  border-radius: 0 40px 40px 0;
}

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

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <link rel="stylesheet" href="nigerian-flag.css">
  <title>nigerian flag</title>
</head>

<body>
  <div class="flex">
    <div class="box1">
    </div>
    <div class="box2">
    </div>
    <div class="box3">
    </div>
  </div>
</body>

</html>

css

来源：https://stackoverflow.com/questions/75241460/how-to-remove-padding-around-flag

3条答案

按热度按时间

8qgya5xd1#

只需将display: flex;更改为display: inline-flex;就可以做到这一点。如果需要，可以将标志居中。

.flex {
  display: inline-flex;
  border-color: black;
  border: 5px;
  border-style: dashed;
  flex-direction: row;
  justify-content: center;
  padding: 0;
}

.box1 {
  height: 200px;
  width: 100px;
  background-color: green;
  border-radius: 40px 0 0 40px;
}

.box2 {
  height: 200px;
  width: 100px;
  background-color: whitesmoke;
}

.box3 {
  height: 200px;
  width: 100px;
  background-color: green;
  border-radius: 0 40px 40px 0;
}

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

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <link rel="stylesheet" href="nigerian-flag.css">
  <title>Nigerian flag</title>
</head>

<body>
  <div class="flex">
    <div class="box1">
    </div>
    <div class="box2">
    </div>
    <div class="box3">
    </div>
  </div>
</body>

</html>

赞(0）回复(0）举报 2023-01-27

oxcyiej72#

你可以添加到flex类样式，你可以改变宽度，如果你想

.flex{ width: 50%; margin: 0 auto;}

赞(0）回复(0）举报 2023-01-27

km0tfn4u3#

由于您的旗帜总宽度为300px，因此您可以轻松地添加"width：300px;在."flex"中

.flex {
  display: flex;
  border-color: black;
  border: 5px;
  border-style: dashed;
  flex-direction: row;
  justify-content: center;
  padding: 0;
  width: 300px;
}

.box1 {
  height: 200px;
  width: 100px;
  background-color: green;
  border-radius: 40px 0 0 40px;
}

.box2 {
  height: 200px;
  width: 100px;
  background-color: whitesmoke;
}

.box3 {
  height: 200px;
  width: 100px;
  background-color: green;
  border-radius: 0 40px 40px 0;
}

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

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <link rel="stylesheet" href="nigerian-flag.css">
  <title>nigerian flag</title>
</head>

<body>
  <div class="flex">
    <div class="box1">
    </div>
    <div class="box2">
    </div>
    <div class="box3">
    </div>
  </div>
</body>

</html>

赞(0）回复(0）举报 2023-01-27

我来回答

css 如何删除标记周围的填充

3条答案

相关问题

热门标签

最新问答