Menu
This seems to be a common problem but none of the solutions I found have worked for me.
<html>
<head>
<link rel="stylesheet" href="c/lasrs.css" type="text/css" />
</head>
<body>
<div class="header">
<img src="i/header1.png">
</div>
<div class="content">
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nam cursus.
Morbi ut mi. Nullam enim leo, egestas id, condimentum at, laoreet mattis,
massa. Sed eleifend nonummy diam. Praesent mauris ante, elementum et,
bibendum at, posuere sit amet, nibh.</p>
</div>
</body>
</html>
body {
min-width: 950px;
background-color: #FFFFFF;
color: #333333;
}
.header {
width: 950px;
height: 171px;
margin: 0px auto;
padding: 0px;
background-color: #CCCCCC;
position: relative;
}
.content {
width: 950px;
margin: 0px auto;
padding: 0px;
background-color: #E3EEF9;
position: relative;
}
I deliberately broke the image path and set a background colour for the .header div so that I could see if they were touching. This is what my page looks like:
As you can see I've tried setting the padding and margins on both divs to 0.
Why is there still a gap?
425
This is due to the following:
Browsers automatically add some space (margin) before and after each
<p>element. The margins can be modified with CSS (with the margin properties).
So try:
p {
margin: 0px;
}
Note: browsers add default styling on other elements too! This can be both useful and annoying in different situations. There are three ways to go about this:
*{ margin:0; padding:0; } reset approach (Read here why)Normalize the stylesheet to your own defaults. A large annoyance of webdesigners is that different browsers use different default styles. However, a complete reset comes with the time-consuming trouble of redefining the styles of all elements. Therefore, you can normalize all default styles of the browsers by using a predefined set of consistent and sensible default styles. The common approach is to use normalize.css for this (Twitter, Github and SoundCloud use this!)
Adjust the defaults when necessary or consciously work around the defaults. The most common way (not saying it's the best way) to work with the defaults is to know they exist and adjust them when necessary. Default styles are there for a reason: they can help developers to quickly get the looks they are after. Is the look slightly off? Simply adjust the styles accordingly. However, make sure you use the correct tags for the correct elements. For example, instead of removing the <p> margins for inline texts, you should use the <span> tag (no default margin)
That should help you understand what's going on behind the scenes.
112
Your margins in the paragraphs are overflowing out of the div (this is normal) you can either set
p {
margin: 0;
}
or apply overflow hidden to your divs
div {
overflow: hidden;
}
use
*{
padding:0;
margin:0;
}
in your style
33
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
