I’m adjusting a HTML 5, CSS responsive template. I replaced the text logo with a png graphic that I drew. The logo is within the header. The header has a top padding of 30px. In order to position the logo correctly I tried to set a negative top margin of -20px to the logo class, and I also tried setting a negative top padding of -30px. Setting the logo to a negative top padding value does nothing. Setting the top margin to negative 20px positions the logo correctly but cuts off the top of the logo once it overlaps with the header’s padding value. A solution that I found on another blog to the same problem that someone else encountered in the same situation did not work at all.
As always, it helps a lot to see the html code you are working with.
It’s also best to post actual code (or link to live page or Codepen) as opposed to an image of your code.
2 Likes
Setting a negative top margin cuts off the top of an image file no matter what. Nav, branding, Li, etc. are all within the header. The logo is within branding. I fixed the issue this way
header{
background: linear-gradient(90deg, rgba(255,255,255,1) 50%, rgba(106,125,187,1) 50%);
color:#000000;
padding-bottom: 20px;
min-height:70px;
border-bottom:#8ce067 .2rem solid;
}
header a{
color:#000000;
text-decoration:none;
text-transform: uppercase;
font-size:.8rem;
}
header li{
float:left;
display:inline;
padding: 0 20px 0 20px;
}
header #branding{
float:left;
height: 5rem;
}
.logo {
max-width: 229px;
max-height: 75px;
padding-top: 10px;
}
header nav{
float:right;
margin-top:10px;
letter-spacing: .8rem;
font-size: .8rem;
font-weight:700;
padding-top:30px;
}
header .highlight, header .current a{
color:#000000;
}
.current {
font-size: .5rem;
}
header a:hover{
color:#dceb69;
font-weight:bold;
}
but setting negative margins without the image cutting off would have been a faster mod.
<header>
<div class="container">
<div id="branding">
<img class="logo" alt="logos" src="img/logob.png">
</div>
<nav>
<ul>
<li class="current"><a href="index.html">Home</a></li>
<li><a href="about.html">About</a></li>
<li><a href="services.html">Services</a></li>
</ul>
</nav>
</div>
</header>
In th image it does, but in the code you posted it does not.
When the header has the top padding, the negative margin doesn’t push the image out the top.
It begs the question why you have added top padding to the header and the logo when you want the logo higher in the container.
1 Like
The point is adding negative margins is a faster way to adjust templates in certain scenarios.
The trouble with quick fixes is that they only fix it for the time being and although it seems an easy approach to use a negative margin you are adding an extra layer of maintenance for the future.
You use a 'magic number" of 30px which is the amount needed to offset the padding-top on the header. However, as Sam pointed out, you have no padding-top in your code example so the logo will be cut off by 30px. Your fix failed at the first attempt.
Once you make an element dependent on what some other element has to be you create an inter-dependency that is easily broken in the future. Another designer comes along and decides that the header needs 20px padding-top instead and then your logo breaks. You then have top search through the document and change anything else that may have been basing it’s position assuming that there was 30px padding in place.
It is much better to allow elements to sit in the normal flow (where possible) and changing an unrelated element will not have adverse effects. Don’t make elements only work assuming that some other element is going to be there or have specific dimensions.
In some cases you may need to hard code values in order to make things match but these days with the tools available we can avoid fragile code. 
There is no such thing as negative padding
I doubt you meant to add padding to your image either as that makes no sense. Use a margin to move images not padding.
3 Likes
Hypothetically there could be. There’s always new code.
Yes experience tells me that code always changes over time which is why it is of utmost importance not to rely on magic numbers where possible.
Robust pages require robust solutions. Quick fixes are often long time fixes that become a thorn in the side as time goes by
5 Likes
This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.