如何删除子div之间的父div空白?

时间:2019-11-07 16:54:00

标签: css

对我来说没有任何工作。我这里有两个问题:

  1. 父级div的空白以蓝色显示。

screenshot

  1. 页面底部的正文空白显示黄色。

screenshot

margin; 0;可以完成工作,但在底部却留下了我上面黄色的神秘白色空间。我不明白为什么。

感谢您阅读我的信息! :-)

body
{
    background-color: yellow;
    margin: 0;
}

.parent
{

    background-color: blue;

}

.enfant-un
{

    background-color: orange;
    height: 120px;
    padding-left: 10%;
    padding-right: 10%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin: 0px;

}

.logo
{

    width: 90px;

}

.logo:hover
{

    opacity: 0.75;

}


.menu
{



}

.menu li
{

    display: inline;
    padding-right: 10px;

}

.menu li:hover
{

    opacity: 0.75;

}

.illustration
{

    width: 100%;
    border-radius: 6px;

}

.enfant-deux
{

    background-color: green;

}

.enfant-trois
{

    background-color: red;

}

.enfant-quatre
{

    background-color: violet;

}
<!DOCTYPE html>

<html lang="fr">

    <head>

        <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
        <meta name="viewport" content="width=device-width, user-scalable=no">
        <title>GBAF(Groupement Banque-Assurance Français)</title>
        <link rel="stylesheet" type="text/css" href="style.css"/>
        <link rel="shortcut icon" type="image/png" href="images/favicon.png"/>

    </head>

    <body>

        <div class="parent">

            <div class="enfant-un child">

                <a href="index.php">

                    <img class="logo" src="images/logo.png" title="Acceuil" alt="Le logo de GBAF(Groupement Banque-Assurance Français)." />

                </a>

                <nav class="menu">

                    <?php

                        $autorisation = false;
                        if ($autorisation)
                        {
                            echo "$nom $prenom";
                        }
                        else
                        {

                    ?>
                        <ul>

                            <li><a href="#" title="Créer un nouveau compte">Inscription</a></li>
                            <li><a href="#" title="Se connecter avec un compte existant">Connexion</a></li>

                        </ul>

                    <?php

                        }

                    ?>

                </nav>

            </div>

            <div class="enfant-deux child">

                <h1>Groupement Banque-Assurance Français</h1>
                <p>Présentation des partenaires</p>
                <img class="illustration" src="images/illustration.jpg" alt="Bureaux de GBAF(Groupement Banque-Assurance Français)."/>

            </div>

            <div class="enfant-trois child">

                    <h2>Acteurs et partenaires</h2>
                    <p>Présentation des acteurs et partenaires</p>

                <div class="acteur">

                    <img src="images/logo-acteur-1.png" alt="Acteur 1"/>
                    <h3>Acteur 1</h3>
                    <p>Description + lien</p>
                    <button href="#" class="lirelasuite">Lire la suite</button>

                </div>

                <div class="acteur">

                    <img src="images/logo-acteur-2.png" alt="Acteur 2"/>
                    <h3>Acteur 2</h3>
                    <p>Description + lien</p>
                    <button href="#" class="lirelasuite">Lire la suite</button>

                </div>

                <div class="acteur">

                    <img src="images/logo-acteur-3.png" alt="Acteur 3"/>
                    <h3>Acteur 3</h3>
                    <p>Description + lien</p>
                    <button href="#" class="lirelasuite">Lire la suite</button>

                </div>

                <div class="acteur">

                    <img src="images/logo-acteur-4.png" alt="Acteur 4"/>
                    <h3>Acteur 4</h3>
                    <p>Description + lien</p>
                    <button href="#" class="lirelasuite">Lire la suite</button>

                </div>

                <div class="acteur">

                    <img src="images/logo-acteur-5.png" alt="Acteur 5"/>
                    <h3>Acteur 5</h3>
                    <p>Description + lien</p>
                    <button href="#" class="lirelasuite">Lire la suite</button>

                </div>

                <div class="acteur">

                    <img src="images/logo-acteur-6.png" alt="Acteur 6"/>
                    <h3>Acteur 6</h3>
                    <p>Description + lien</p>
                    <button href="#" class="lirelasuite">Lire la suite</button>

                </div>

            </div>

            <div class="enfant-quatre child">

                <nav class="menu">
                    <ul>
                                <li><a href="#">Mentions légales</a></li>
                                <li><a href="#">Contact</a></li>
                    </ul>
                </nav>

            </div>

        </div>

    </body>

</html>

1 个答案:

答案 0 :(得分:0)

h和ul标签上的空白属性导致间距问题。我添加了以下内容,并删除了不需要的空格。小提琴:https://jsfiddle.net/fneqm28b/2/

long round(double)
相关问题
最新问题