Warning: file_get_contents(/data/phpspider/zhask/data//catemap/7/css/33.json): failed to open stream: No such file or directory in /data/phpspider/zhask/libs/function.php on line 167

Warning: Invalid argument supplied for foreach() in /data/phpspider/zhask/libs/tag.function.php on line 1116

Notice: Undefined index: in /data/phpspider/zhask/libs/function.php on line 180

Warning: array_chunk() expects parameter 1 to be array, null given in /data/phpspider/zhask/libs/function.php on line 181
Html 奇怪的5px边距_Html_Css_Slider_Margin_Padding - Fatal编程技术网

Html 奇怪的5px边距

Html 奇怪的5px边距,html,css,slider,margin,padding,Html,Css,Slider,Margin,Padding,我正在这里建立一个网站: 我已经找了几个小时试图找到解决办法。我正在尝试建立我自己的滑块,它将是流体宽度,因此我无法在可能的情况下定义高度/宽度。我已经得到了大部分的滑块与股票图像工作,但当我把它下面的元素,他们是5px低于他们的意思。除了我测试过的IE之外,所有浏览器都会出现这种情况。我想给我的滑块下面的横幅一个负的上边距,这样它就会显示在滑块上,但直到我能找出是什么导致这个5px的边距,我不能 html如下所示: <div id="slider"> <div id="s

我正在这里建立一个网站:

我已经找了几个小时试图找到解决办法。我正在尝试建立我自己的滑块,它将是流体宽度,因此我无法在可能的情况下定义高度/宽度。我已经得到了大部分的滑块与股票图像工作,但当我把它下面的元素,他们是5px低于他们的意思。除了我测试过的IE之外,所有浏览器都会出现这种情况。我想给我的滑块下面的横幅一个负的上边距,这样它就会显示在滑块上,但直到我能找出是什么导致这个5px的边距,我不能

html如下所示:

<div id="slider">
  <div id="sliderwidth">
    <ul>
      <li><img src="imgs/slider/img1.jpg" alt="image 1"></img></li>
      <li><img src="imgs/slider/img2.jpg" alt="image 2"></img></li>
      <li><img src="imgs/slider/img3.jpg" alt="image 3"></img></li>
      <li><img src="imgs/slider/img4.jpg" alt="image 4"></img></li>
    </ul>                           
  </div>                        
</div>  

<div id="sliderborder">
我尝试过的事情:

删除所有jQuery:不起作用。 删除滑块的所有CSS样式:不起作用。 将img高度设置为300px:不起作用。 将li高度设置为300px:worded。 将imgs更换为divs 300px高:已工作。 将填充0、边距0设置为滑块中的每个元素:无效。 检查验证错误:完全验证。 检查的IMG为300px高:它们是。 检查开发工具中的每个元素,以检查是否存在任何恶意边距/填充:未找到

我真的没有主意了,任何帮助都将不胜感激

试试看

div#slider ul img {
    display: block;
    width: 100%;
}

由于默认情况下,图像是内联块元素,因此它们可能需要正确的垂直对齐设置

只需尝试

div#slider ul img {
    display: block;
    width: 100%;
}


由于默认情况下,图像是内联块元素,因此它们可能需要适当的垂直对齐设置

只需添加垂直对齐:底部;像这样:

div#slider ul li img {
    width: 100%;
    vertical-align: bottom;
}

所有你要做的就是添加垂直对齐:底部;像这样:

div#slider ul li img {
    width: 100%;
    vertical-align: bottom;
}

没有什么奇怪的。。。只需将“显示:块”添加到图像中

默认情况下,所有图像都是内联元素内联或内联块,并作为一行文本处理。这个空间是y或G的悬挂部分要去的地方。这解释得很糟糕,但你明白了

div#slider ul li img {
    width: 100%;
    display: block;
}

没有什么奇怪的。。。只需将“显示:块”添加到图像中

默认情况下,所有图像都是内联元素内联或内联块,并作为一行文本处理。这个空间是y或G的悬挂部分要去的地方。这解释得很糟糕,但你明白了

div#slider ul li img {
    width: 100%;
    display: block;
}

出于某种原因,我只是在我的网站顶部和左侧留了5倍的空白。我无法摆脱它。。。直到我将body元素的边距设置为0。问题解决了。希望这能帮助任何遇到这个烦人问题的人

出于某种原因,我的网站顶部和左侧有一个5px的边距。我无法摆脱它。。。直到我将body元素的边距设置为0。问题解决了。希望这能帮助任何遇到这个烦人问题的人

还有,用just替换你的。还有,用just替换你的。这是一个绝对合法的解决方案,而不是一个把戏。如果我按照你的想法做,他为什么要设定100%?改变html的视觉外观是CSS的工作原理。@Bondye。。。这不是一个骗局,不过解释一下它为什么会起作用还是有用的。默认情况下,图像是某些浏览器中的内联块元素。因此,它们与文本并排:可见的空间是字母“p”和“q”的后代。将“显示”属性设置为阻止该选项。另一种方法是显式地将垂直对齐属性设置为默认基线以外的其他属性。对于这样的图像滑块,display:block似乎更合适。这是一个绝对合法的解决方案,而不是一个技巧。如果我按照你的想法做,他为什么要设定100%?改变html的视觉外观是CSS的工作原理。@Bondye。。。这不是一个骗局,不过解释一下它为什么会起作用还是有用的。默认情况下,图像是某些浏览器中的内联块元素。因此,它们与文本并排:可见的空间是字母“p”和“q”的后代。将“显示”属性设置为阻止该选项。另一种方法是显式地将垂直对齐属性设置为默认基线以外的其他属性。但是,对于这样的图像滑块,display:block似乎更合适。