简体繁体 English

HTML / CSS边距或填充问题

[英]HTML/CSS margin or padding problem

原文 2011-07-29 19:35:13 0 2 html/ css/ windows-phone-7/ mobile

I am redesigning a website to better work with mobile devices. 我正在重新设计网站，以更好地使用移动设备。 My problem is that on the right side of the page there is an open space, even though all the specified widths are the same. 我的问题是，即使所有指定的宽度都相同，页面的右侧还是有一个空白区域。 Here is the page: http://uniqueantiqueskingsport.com/wp7 . 这是页面： http : //uniqueantiqueskingsport.com/wp7 。 So far I have only tested it with the Windows Phone 7 emulator. 到目前为止，我仅使用Windows Phone 7模拟器对其进行了测试。

2 个解决方案

I don't have a WP7 to test this on, but I'm seeing the same when viewing on desktop browsers. 我没有WP7可以对此进行测试，但是在台式机浏览器上查看时却看到相同的结果。 The problem is your footer content, a lot of it is set at width: 320px , margin: x and padding: x . 问题是您的页脚内容，其中很多内容设置为width: 320px ， margin: x和padding: x 。 Those margins are adding to the box model of your content, and forcing the page to expand. 这些边距增加了内容的盒子模型，并迫使页面扩展。

Read up on the box model at Sitepoint's awesome reference site . 在Sitepoint出色的参考站点上阅读盒子模型。

For the record, IE9 on Mango automatically zooms to fit the width of your content. 作为记录，芒果上的IE9会自动缩放以适合您内容的宽度。 But using a dynamic width would be much better. 但是使用动态宽度会更好。