【问题标题】:Unwanted padding left margin of images using CSS wrapper使用 CSS 包装器不需要填充图像的左边距
【发布时间】:2016-10-14 08:07:33
【问题描述】:

图像左侧有多余的填充(请参阅下面的代码)。我尝试过更改、删除或替换 CSS .wrapper-shadow 中的每一行代码——不走运。此错误出现在 Firefox、Chrome 和资源管理器中。有趣的是,我对同一站点的平板电脑和移动页面有非常相似的代码,但没有错误。我尝试用平板电脑的 CSS 和 HTML 代替桌面代码,但还是出现了错误。 See attached image of the problem.

还很有趣:平板电脑和移动网站(显示正确)的左边距比桌面网站窄。 See attached image of margin difference。我搜索了我的自定义引导 CSS 的每一行,看看我是否能找到台式机和平板电脑样式表之间的区别——同样,没有运气。任何帮助将不胜感激。谢谢。 扎弗

.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>

【问题讨论】:

标签: css twitter-bootstrap padding


【解决方案1】:

我自己找到了答案。思考一个足以发布它的问题有时会在几分钟后在你的大脑中弹出答案,这真是太棒了。

我有一行:“padding-left: 5px;”在我的父 bootstrap.css 的 *{} 样式中,它正在级联并导致我的样式.css 中的错误。 (见下面的代码)。错误仅出现在我的网站的桌面版本中,而不出现在具有自己的样式表的平板电脑或移动设备中,这一事实是线索。我想这个故事的寓意总是检查你的级联。谢谢。 扎弗

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

【讨论】:

    猜你喜欢
    • 2013-12-29
    • 1970-01-01
    • 2019-11-17
    • 1970-01-01
    • 2010-11-13
    • 2015-02-15
    • 1970-01-01
    • 2012-03-30
    • 2016-02-15
    相关资源
    最近更新 更多