Question

我在图像左侧有不需要的填充（请参阅下面的代码）。我试过改变，删除或替换CSS .wrapper-shadow中的每一行代码 - 没有运气。此错误出现在Firefox，Chrome和资源管理器中。有趣的是，对于没有错误的同一站点，我的平板电脑和移动页面的代码非常相似。我尝试用平板电脑CSS和HTML代替桌面代码，但无论如何都出现了错误。 See attached image of the problem

同样有趣：平板电脑和移动网站（显示正确）的左边距比桌面网站窄。 See attached image of margin difference。我搜索了我的自定义引导程序CSS的每一行，看看我是否能找到桌面和平板电脑样式表之间的区别 - 再次，没有运气。任何帮助将不胜感激。谢谢。 Zaffer

.wrapper_shadow{ 
	max-width: 765px;
	background-color: #9ebade;
	border: thin solid #758fa9;
	-webkit-box-shadow: 2px 2px 5px 2px #758fa9;
	box-shadow: 2px 2px 5px 2px #758fa9;
	margin-bottom: 15px;
	padding-left: 0px;	
}

<div class="container-fluid">
  <div class="pageHeaderText">Virtual performance art made with Unity3D game creation software</div>
  <div class="row">
   <div class="col-sm-6">
       <div class="wrapper_shadow center-block">
         <img src="images/ColorCubed_765.jpg" class="img-responsive center-block" alt="ColorCubed"/>
      </div>

Answer 1

我自己就找到了答案。如果能够发布一个足以发布它的问题，有时会让答案在几分钟后突然出现在你的大脑中，这真是太棒了。

我有一条线：＆＃34;填充左：5px;＆＃34;在我的父bootstrap.css的* {}样式中，它正在级联并导致styles.css中的错误。（见下面的代码）。事实上，错误仅出现在我的网站的桌面版本而不是平板电脑或移动设备中，它们有自己的样式表，这是线索。我想故事的寓意总是检查你的级联。谢谢。 Zaffer

＆＃13;

* {
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	box-sizing: border-box;
	padding-left: 5px;
}

＆＃13;

不需要的填充使用CSS包装器留下图像的边缘

1 个答案: