Help me understand about margin from div and section

HTML-CSS
1

Can someone help me understand why I can’t create space on the top of my section?

  • If I try to add padding in my section (CSS). The section expands in height. Yes I do get space at the top but I don’t want an expansion of the section.
  • If try adding margin-top in my div (contains image, h1 and p) nothing happens. It sticks at the top of my section.

I have read something on google about collapsing margins but my english vocabulary is not that advanced to understand immediately why this is happening.

Can someone explain it more simplified?

Thank you in advance!

temp1
temp11261×855 42.3 KB

2

Hi again,
Do you have your code to share with us? It’s important to know how the section is styles. Padding would usually work, even if you only add it to the top. Does the section have any fixed height?

3 
<!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="stylesheet1.css">
    <title>Portfolio </title>
</head>
<body>
    <header>
        <navbar>
            <ul>
                <li>Home</li>
                <li>Gallerij</li>
                <li>Contact</li>
            </ul>
        </navbar>
    </header>
    <section id="introduction">
        <div id="about">
            <img src="https://placehold.co/400" width="300px">
            <div id="info">
                <h1>Welkom</h1>
                <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Nulla blanditiis praesentium maxime et aperiam, ullam ipsam saepe animi eaque quos suscipit tempore nemo expedita illo, facere explicabo eligendi! Est, ut.
                <a href="">Lees meer</a>
                </p>
            </div>
        </div>
    </section>
    
<footer>
    <p>Website designed by dev</p>
</footer>
</body>
</html>


body {
    width:100%;
}
#introduction {
    background-color: aqua;
    width: 100%;
    height: 500px;
}
#about {
    border: black solid 2px;
    display: flex;
    justify-content: row;
    width:900px;
    margin-top:10px;
}


#info {
    display: flex;
    flex-direction: column;

}
4

Okay, since your section has a fixed height, you can try add padding-top and then decrease the height of the section. For example if you add a padding-top of 50px and change the height to 450px, the section will still have a total height of 500px.
I hope this helps.

5

I tried your advice, that worked.

I tried to remove the fixed height to see how it looks like. It still behaves the same way.
Can you explain to me why this is happening.


body {
    width:100%;
}
#introduction {
    background-color: aqua;
    width: 100%;
    
}
#about {
    border: black solid 2px;
    display: flex;
    justify-content: row;
    width:900px;
    margin-left:auto;
    margin-right: auto;
    margin-top: 50px;
   
}


#info {
    display: flex;
    flex-direction: column;

}
6

This is my final solution


body {
    width:100%;
}
#introduction {
    background-color: aqua;
    width: 100%;
    padding-top: 50px;
    padding-bottom:50px;
    
}
#about {
    border: black solid 2px;
    display: flex;
    justify-content: row;
    width:900px;
    margin-left:auto;
    margin-right: auto;
    
   
}


#info {
    display: flex;
    flex-direction: column;

}
7

Yes, this one also works. If you don’t have a fixed height, then adding paddings top and bottom works.
If you’re still facing any issues, I’d be glad to help.
Happy coding!

1 Like