如何从 CSS 中删除边距？答案

【问题标题】：How can I remove the margin from CSS?如何从 CSS 中删除边距？
【发布时间】：2021-10-26 14:55:52
【问题描述】：

我是 Stack Overflow 的初学者，使用 HTML 和 CSS。抱歉，如果看起来不是标准问题。

我正在尝试建立一个网站。我看到我有两个边距（一个在左侧，另一个在屏幕右侧）。我想有 no 边距。我的代码有什么问题？

我的 CSS 代码是

.container
{
    /* Center contents */
    margin-left: 0;
    margin-right: 0;
    text-align: center;
}

.table
{
    max-width: 600px;
    margin: auto;
}

main .form-control
{
    /* Center form controls */
    display: inline-block;

    /* Override Bootstrap's 100% width for form controls */
    width: auto;
}

main
{
    /* Scroll horizontally as needed */
    overflow-x: auto;

    /* Center contents */
    text-align: center;
}


main td
{
    /* Left-align the tables' cells */
    text-align: left;
}

我也添加了 HTML 代码。

<!DOCTYPE html>

<html lang="en">

    <head>
        <!-- https://developer.mozilla.org/en-US/docs/Web/HTML/Element/meta -->
        <meta charset="utf-8"/>
        <meta content="initial-scale=1, width=device-width" name="viewport"/>

        <title>My Finance: {% block title %}{% endblock %}</title>
    </head>

    <body>
        <div class="container">

            <nav class="navbar navbar-default">
                <div class="container-fluid">
                    <div class="navbar-header">
                        <button aria-expanded="false" class="navbar-toggle collapsed" data-target="#navbar" data-toggle="collapse" type="button">
                            <span class="sr-only">Toggle navigation</span>
                            <span class="icon-bar"></span>
                            <span class="icon-bar"></span>
                            <span class="icon-bar"></span>
                        </button>
                        <a class="navbar-brand" href="{{ url_for('index') }}"><span class="blue">My</span><span class="red">Finance</span></a>
                    </div>
                    <div class="collapse navbar-collapse" id="navbar">
                        {% if session.user_id %}
                            <ul class="nav navbar-nav">
                                <li><a href="{{ url_for('quote') }}">Quote</a></li>
                                <li><a href="{{ url_for('buy') }}">Buy</a></li>
                                <li><a href="{{ url_for('sell') }}">Sell</a></li>
                                <li><a href="{{ url_for('history') }}">History</a></li>
                            </ul>
                            <ul class="nav navbar-nav navbar-right">
                                <li><a href="{{ url_for('logout') }}">Log Out</a></li>
                            </ul>
                        {% else %}
                            <ul class="nav navbar-nav navbar-right">
                                <li><a href="{{ url_for('register') }}">Register</a></li>
                                <li><a href="{{ url_for('login') }}">Log In</a></li>
                            </ul>
                        {% endif %}
                    </div>
                </div>
            </nav>

            {% if get_flashed_messages() %}
                <header>
                    <div class="alert alert-info" role="alert">
                        {{ get_flashed_messages() | join(" ") }}
                    </div>
                </header>
            {% endif %}

            <main>
                {% block main %}{% endblock %}
            </main>

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

【问题讨论】：

最好的方法是使用浏览器工具检查元素。否则也请添加 HTML。
也添加html代码
请阅读How to Ask 并提供minimal reproducible example。使用问题编辑器的实时演示功能。（只有 CSS 而没有您提供的 HTML，这看起来就像您明确地给元素的边距，所以如果您不想这样做，请不要这样做）。
没有 HTML 或 minimal reproducible example 几乎不可能仅从 CSS 和屏幕截图中找出答案
如果您使用的是 Bootstrap，请尝试将 <div class="container"> 更改为 <div class="container-fluid"> 以获得全宽

标签： html css margin

【解决方案1】：

看起来你正在使用Bootstrap，在这种情况下你应该改变

<div class="container">

到

<div class="container-fluid">

因为container 类具有固定宽度，但container-fluid 是全宽度。这应该会删除您页面的任何额外填充/边距。

【讨论】：

【解决方案2】：

为您的代码添加重置样式：

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

【讨论】：

这是一种可怕的大锤方法，考虑到提供的其余 CSS，我认为这种方法在这里行不通
我试过你的建议，但问题还是一样。

【解决方案3】：

尝试执行 CSS“重置”：

* {margin: 0;}

这将消除所有地方的边距。如果您将来需要一个边距，您可以在该特定元素上设置它。

尝试在您看到边距的那个元素上设置width: 100%。

MetropolisCZ's point 使用开发工具也是很好的建议。

【讨论】：

你好，我试过你的建议，但问题还是一样。