5px额外的margin添加到每个div的底部

本文介绍了5px额外的margin添加到每个div的底部的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！ 问题描述

我想设计一个简单的标题到css中的页面。我计划把两个div堆叠在一起。顶部有一个标签，底部是一个纯实的单图像div。但是当渲染我看到一个额外的5px被添加到这两个div的高度。所以我不能把底部正好在另一个的顶部。

I am trying to design a simple header to a page in css. I planned to stack two divs on top of each other. The top one has many tabs and the bottom one is a plain solid single image div. But when rendering i see that an extra 5px is getting added to the the heights of both these divs. So i am not able to place the bottom on exactly on top of the other one.

自动有一个5px底部边距。我尝试负边距，重置全局边距和paddings为零。仍然没有用。

There is a 5px bottom margin automatically. I tried negative margins, reset the global margins and paddings to zero. Still no use.

完成代码。

<div class ="main_nav"> <div class="first_tab"> <img src ="images/startup/tab1_brown.png" height="25" width="90" alt="Temp" /> </div> <div class = "ind_tab"> <img src ="images/startup/tab1_orange.png" height="25" width="90" alt="Temp"/> </div> <div class = "ind_tab"> <img src ="images/startup/tab1_brown.png" height="25" width="90" alt="Temp" /> </div> </div> <div class="lock"> <img src ="images/startup/divbg_new.png" alt="Temp" /> </div>

CSS：

*{ margin:0; padding:0; } ul.master_navigation { font-size: 125%; font-weight: bold; text-align: center; list-style: none; margin: 0.5em 0; padding: 0; } ul.master_navigation li { display: inline-block; padding: 0 1%; } a { color: #08f; font-weight: bold; text-decoration: none; } a:visited { color: #88f; } a:hover { color: #f00; } p { text-align: justify; } p.cent { text-align: left; } div.header { height: 200; } div.main_nav { display: inline-block; height: 25; width: 900; padding: 0; margin: 0; vertical-align: bottom; } div.first_tab { height: 25; float: left; } div.ind_tab { height: 25; float: left; margin-left: -10px; z-index: -5; } div.lock { margin-top: -100; height: 91; width: 900; padding: 0; margin: -5; }

body {

body {

width:900px; max-width: 100%; margin: auto; padding: 0; background-image:url(images/startup/bg_2.gif); background-repeat:repeat-x; } .pad { padding: 0; margin: 0; }

以下是此页面的链接

http：/ /net4.ccs.neu.edu/home/pradep/

我在这方面花了太多时间。请帮忙。

Ive been spending too much time on this. Please help.

推荐答案

您需要在CSS声明中指定单位。

You need to specify units on your CSS declarations.

jsfiddle/m7YCW/

div.main_nav { display: inline-block; height: 25px; /* set px */ width: 900; padding: 0; margin: 0; vertical-align: bottom; }

了解如何使用Chrome中的开发人员工具按钮上的元素和选择 - >检查它会带来开发工具。然后，您可以查看指标和计算样式区域，以查看main_nav正在渲染为30px，而不是25px，并且在25 css声明旁边有一个警告符号，并被明确删除。

Learn to make use of your developer tools in Chrome, if you had right mouse buttoned on the elements and chosen -> inspect it would bring up the dev tools. You can then view the 'metrics' and 'computed styles' areas to see that main_nav was rendering as 30px instead of 25px and also that there was a warning symbol next to the 25 css declaration and it was being explicitly dropped.