Lower my <h2> by 50

HTML & CSS
1

Good morning,

I wanted to lower my

Contact me:

using margin 50;

The problem is that nothing happens, do you have any ideas?

Sans titre
Sans titre1268×293 30.1 KB

my html

<section class="contact">
        <h2>Contactez-moi:</h2>
        <p>Merci pour ma page portfolio.<br>
            N'hésitez pas à me contacter en utilisant l'une des options disponibles, je serai heureux d'avoir de vos
            nouvelles.
        </p>
        <div class="inline">
            <div class="info">
                <img src="./img/social/phone.png">
                <p><strong>+32</strong>470252525</p>
            </div>
            <div class="info">
                <img src="./img/social/email.png">
                <p>cdevl@gmail.com</p>
            </div>
        </div>
        <hr>
        <div class="social">
            <a target="_blank" href="#"><img src="./img/social/facebook.png"></a>
            <a target="_blank" href="#"><img src="./img/social/instagram.png"></a>
            <a target="_blank" href="#"><img src="./img/social/twitter.png"></a>
        </div>
    </section>

my css

.contact {
    background-color: #383838;
    text-align: center;
    margin: 50;
}

.contact h2 {
    font-weight: 500;
    font-size: 30px;
    columns: var(--prime-color);
    margin: 15px;
}

.contact p {
    font-size: 25px;
    margin: 50px;
}

.inline {
    display: flex;
    justify-content: center;
    gap: 50px;
}

.info {
    display: flex;
}

.info img {
    align-self: center;
}

.info>p {
    margin: 0px;
}

.social img {
    opacity: 0.6;
}

.social img:hover {
    opacity: 1;
}

.footer {
    background-color: black;
    color: white;
    font-size: 20px;
    text-align: center;
    padding: 20px;
    font-weight: 100;
}
2

Well the most likely issue is that you have no units on the value, just adding 50 “somethings” to the margin. Is that inches, meters, or maybe rem or pixels?

Note that whatever units you use, with margin:50 you’re setting the margin on all four sides of .contact, and you might want just margin-top:50

2 Likes
3

I just noticed that it is padding 50px and not margin

4

The top margin on the h2 would collapse on to the section.contact element and move the dark gray background downwards along with the h2 thus creating no space between the top of the h2 and the coloured contact section.

Using padding-top:50px would avoid this issue as you seem to have found out by chance.:wink:

You should read up on collapsing margins if you have not encountered them before as they are an important concept in laying out items on the page.

Also as @tracknut already said you must specify the units and remember that margin and padding properties are short hand for all 4 sides at once.