I have some practice code I've been given which displays three restaurant menu items. It's responsive, and has "small", "medium" and "large" modes. For some reason, in "small" mode the author hasn't given the blue containers "float: left" style. I don't know why but this causes the header box to have a small margin above it.
* {
font-family: Tahoma, Geneva, sans-serif;
}
h1 {
font-size: 175%;
text-align: center;
}
#p1 {
background-color: #6666ff;
font-size: 125%;
text-align: center;
float: right;
padding: 5px 40px 5px 40px;
}
#p2 {
background-color: #9966ff;
font-size: 125%;
text-align: center;
float: right;
padding: 5px 40px 5px 40px;
}
#p3 {
background-color: #3366ff;
font-size: 125%;
text-align: center;
float: right;
padding: 5px 40px 5px 40px;
}
p {
border: 1px solid black;
padding: 50px 15px 15px 15px;
margin: 10px;
text-align: left;
background-color: #ccffff;
}
.row {
width: 100%;
}
/*.menu-box {
float: left;
}*/
@media (min-width: 992px) {
.col-lg-1, .col-lg-2, .col-lg-3, .col-lg-4, .col-lg-5, .col-lg-6, .col-lg-7, .col-lg-8, .col-lg-9, .col-lg-10, .col-lg-11, .col-lg-12 {
float: left;
}
.col-lg-1 {
width: 8.33%;
}
.col-lg-2 {
width: 16.66%;
}
.col-lg-3 {
width: 25%;
}
.col-lg-4 {
width: 33.33%;
}
.col-lg-5 {
width: 41.66%;
}
.col-lg-6 {
width: 50%;
}
.col-lg-7 {
width: 58.33%;
}
.col-lg-8 {
width: 66.66%;
}
.col-lg-9 {
width: 74.99%;
}
.col-lg-10 {
width: 83.33%;
}
.col-lg-11 {
width: 91.66%;
}
.col-lg-12 {
width: 100%;
}
}
@media (min-width: 768px) and (max-width: 991px){
.col-md-1, .col-md-2, .col-md-3, .col-md-4, .col-md-5, .col-md-6, .col-md-7, .col-md-8, .col-md-9, .col-md-10, .col-md-11, .col-md-12 {
float: left;
}
.col-md-1 {
width: 8.33%;
}
.col-md-2 {
width: 16.66%;
}
.col-md-3 {
width: 25%;
}
.col-md-4 {
width: 33.33%%;
}
.col-md-5 {
width: 41.66%;
}
.col-md-6 {
width: 50%;
}
.col-md-7 {
width: 58.33%;
}
.col-md-8 {
width: 66.66%;
}
.col-md-9 {
width: 74.99%;
}
.col-md-10 {
width: 83.33%;
}
.col-md-11 {
width: 91.66%;
}
.col-md-12 {
width: 100%;
}
}<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Assignment Solution for Module 2</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<h1> Our Menu </h1>
<div class="row">
<div class="col-lg-4 col-md-6 menu-box"><p id="p1" class="menu-header-box">Chicken</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. In iaculis
fringilla elit sit amet tincidunt. Maecenas lacinia sem nec lobortis luctus.
In molestie volutpat tempor. Duis posuere ante eget finibus semper. Fusce
pretium enim sit amet tortor convallis, vel mollis eros lacinia. Vestibulum
dapibus arcu vitae viverra condimentum. Rutrum turpis quis, posuere velit.
Morbi dictum dui quis molestie finibus. Phasellus sed aliquet leo.</p></div>
<div class="col-lg-4 col-md-6 menu-box"><p id="p2" class="menu-header-box">Beef</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. In iaculis
fringilla elit sit amet tincidunt. Maecenas lacinia sem nec lobortis luctus.
In molestie volutpat tempor. Duis posuere ante eget finibus semper. Fusce
pretium enim sit amet tortor convallis, vel mollis eros lacinia. Vestibulum
dapibus arcu vitae viverra condimentum. Rutrum turpis quis, posuere velit.
Morbi dictum dui quis molestie finibus. Phasellus sed aliquet leo.</p></div>
<div class="col-lg-4 col-md-6 menu-box"><p id="p3" class="menu-header-box">Pork</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. In iaculis
fringilla elit sit amet tincidunt. Maecenas lacinia sem nec lobortis luctus.
In molestie volutpat tempor. Duis posuere ante eget finibus semper. Fusce
pretium enim sit amet tortor convallis, vel mollis eros lacinia. Vestibulum
dapibus arcu vitae viverra condimentum. Rutrum turpis quis, posuere velit.
Morbi dictum dui quis molestie finibus. Phasellus sed aliquet leo.</p></div>
</div>
</body>
</html>Code: https://jsfiddle.net/awto1c3b/
Images showing the issue:
"Small mode"-- weird margin above header box!
I know that if I put "float: left" on all the boxes, then the margin issue doesn't appear (you can uncomment the .menu-box specifier in the CSS), but I don't understand what "float: left" has to do with the content inside it, why does it affect margins inside it? I was hoping someone more knowledgeable than myself would be able to shed some light on what's happening.
The reason for all this relates to vertical margins collapsing under certain circumstances.
This is what is happening here:
When the parent element is floating the vertical margins of each child element get recognized as being inside the parent element - kind of if you would set a padding on the parent element instead. Since the parent has no background-color and both children have the very same margin top it appears that there is no margin-top at all.
If you set a background color for the parent you will see that the top-margin is being applied for both children and you see an offset to the top border of the parent element.
When the parent is not floating, the vertical margin of each child that is within document flow (in this case the one <p> not floating) gets pushed outside of their parent element. The margin of the floating child elements (<p class="menu-header-box">) however is treated the same way as if the parent was floating itself - it is being recognized as being inside the parent container (see case1 above). This is where your "weird margin" is coming from. You can check this easily when looking at this in the developer tools in your browser or by applying a background-color to the parent element. Since there are only two child elements and the first one is floating, only the second one determins the height of the parent. Because of this you will only see the parents background-color appear on the left and right but not on the top and bottom as you saw in case 1.
