css margin not working without padding

Question

according to the code , i want to marge the inner div "smedia" down ,it's not working unless i'm giving the outer div "layout" a padding value , need an explanation for that

also i figured that this can be solved by giving the "inner div" inline-block value ONLY not even block value , i need an explanation for that also

h1,h2,h3,p,div,section,header,footer,section,article,nav,ul,html,body
{
    
    margin: 0;
    padding: 0;
    
}

li{list-style-position: inside;list-style-type: none;}
body{background-color:white}
*{box-sizing: border-box;}
a{text-decoration: none;}


.header-text{text-align:center;}
.layout{width: 60%;margin: auto; background-color: #4DC1E8;height:300px;padding-top: 0px;}
.smedia{width:200px;background-color: antiquewhite;margin-top: 90px;}
.logo{border-right-style: solid;}

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <link rel="stylesheet" href="p3css.css" >
</head>
<body>
   <h1 class="header-text">Clean Profile Widget</h1>
    <div class="layout">
        <div class="smedia">
            <span class="logo">FB</span>
            <span class="logo">TWR</span>

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

when giving padding

h1,h2,h3,p,div,section,header,footer,section,article,nav,ul,html,body
{
    
    margin: 0;
    padding: 0;
    
}

li{list-style-position: inside;list-style-type: none;}
body{background-color:white}
*{box-sizing: border-box;}
a{text-decoration: none;}


.header-text{text-align:center;}
.layout{width: 60%;margin: auto; background-color: #4DC1E8;height:300px;padding-top: 1px;}
.smedia{width:200px;background-color: antiquewhite;margin-top: 90px;}
.logo{border-right-style: solid;}

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <link rel="stylesheet" href="p3css.css" >
</head>
<body>
   <h1 class="header-text">Clean Profile Widget</h1>
    <div class="layout">
        <div class="smedia">
            <span class="logo">FB</span>
            <span class="logo">TWR</span>

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

thanks in advance.

most of these solutions not explaining how their answers work , i specify that i need an explanation not a solution ... — Ziad Ali, Jul 01 '18 at 11:53
the first answer of the duplicate question said `And check out collapsing margins while you're at it.` --> so click on the link about margin collpasing and you will understand everything ;) — Temani Afif, Jul 01 '18 at 11:54
From that link you can read `Two margins are adjoining if and only if: both belong to in-flow block-level boxes that participate in the same block formatting context no line boxes, no clearance, no padding and no border separate them` --> so this concern only block elements and we need to have 0 padding, that's why adding padding will break this and making your element inline-block will also break this — Temani Afif, Jul 01 '18 at 11:57

Andrzej Ziółek · Answer 1 · 2018-07-01T11:51:04.480

The thing you miss is overflow: auto;. Adding it to parent container makes margin work just fine.

The problem you faced is called margin-collapsing and it's pretty widely known. You can read about it here or here.

You can read about use of overflow and how it affects elements here.

h1,
h2,
h3,
p,
div,
section,
header,
footer,
section,
article,
nav,
ul,
html,
body {
  margin: 0;
  padding: 0;
}

li {
  list-style-position: inside;
  list-style-type: none;
}

body {
  background-color: white
}

* {
  box-sizing: border-box;
}

a {
  text-decoration: none;
}

.header-text {
  text-align: center;
}

.layout {
  overflow: auto;
  width: 60%;
  margin: auto;
  background-color: #4DC1E8;
  height: 300px;
  padding-top: 0px;
}

.smedia {
  width: 200px;
  background-color: antiquewhite;
  margin-top: 90px;
}

.logo {
  border-right-style: solid;
}

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <title>Document</title>
  <link rel="stylesheet" href="p3css.css">
</head>

<body>
  <h1 class="header-text">Clean Profile Widget</h1>
  <div class="layout">
    <div class="smedia">
      <span class="logo">FB</span>
      <span class="logo">TWR</span>

    </div>
  </div>

</body>

</html>

it's about margin-collpasing, so overflow is one fix but it's not the issue or the missing coe — Temani Afif, Jul 01 '18 at 11:45

css margin not working without padding

1 Answers1