如何从 CSS 中删除边距？

Question

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

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

我的 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>

Answer 1

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

<div class="container">

到

<div class="container-fluid">

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

Answer 2

尝试做一个 CSS“重置”：

* {margin: 0;}

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

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

MetropolisCZ关于使用开发工具的观点也是很好的建议。

Answer 3

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

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

如何从 CSS 中删除边距？

问题描述

3 个解决方案

解决方案1
0 2021-08-26 15:45:20

解决方案2
-1 2021-08-26 14:27:07

解决方案3
-1 2021-08-26 14:29:15

如何从 CSS 中删除边距？

问题描述

3 个解决方案

解决方案1 0 2021-08-26 15:45:20

解决方案2 -1 2021-08-26 14:27:07

解决方案3 -1 2021-08-26 14:29:15

解决方案1
0 2021-08-26 15:45:20

解决方案2
-1 2021-08-26 14:27:07

解决方案3
-1 2021-08-26 14:29:15