У меня действительно странное смещение / отступ / маржа / любая ошибка с CSS3.Следующая разметка определяет статью и соответствующую боковую панель:
<section>
<article>
...
</article>
<aside>
...
</aside>
</section>
И я использую стили CSS3 для их отображения рядом:
section {
display: table;
}
article {
display: table-cell;
}
aside {
display: table-cell;
}
Результат должен выглядеть следующим образом (это верх боковой панели):
но на самом деле это выглядит так:
Что это за пробел и почему он там?Как веб-инспектор Safari, так и Firebug Firefox не отображают никакой информации, только Opera Inspector отображает значение макета «OffsetTop», равное 8 пикселям.Есть идеи как это исправить без позиционирования абсолютной боковой панели?
body
{
display:table;
font-family:Arial, sans-serif;
margin:0;
padding:0;
}
body article
{
display:table-cell;
border-right:1px solid #0088b9;
width:766px;
}
body article section
{
clear:both;
display:inline-block;
margin:0 34px 0 0;
padding:13px 0 13px 34px;
width:698px;
}
body article section.rule
{
border-bottom:1px solid #a6a6a6;
}
body article section.title
{
background-color:#0088b9;
color:#FFF;
font-size:39px;
font-style:bolder;
padding:13px 34px;
width:664px;
}
body article section.header
{
background-color:#7cb6d6;
color:#FFF;
font-size:26px;
font-style:bold;
padding:13px 34px;
width:664px;
}
body article section.text
{
padding:13px 34px;
width:664px;
}
body article section.text p
{
margin:0;
font-size:20px;
}
body article section.list ul
{
font-size:20px;
list-style-image:url(dot.png);
margin:0 0 0 -16px;
}
body article section.images figure
{
display:block;
float:left;
font-size:15px;
margin:0;
padding:0;
text-align:center;
width:332px;
}
body article section.images figure:last-child
{
margin-left:34px;
}
body article section.image figure
{
display:block;
font-size:15px;
padding:0;
text-align:center;
}
body aside
{
background-color:#ccd6e2;
border-left:1px solid #FFF;
display:table-cell;
width:256px;
}
body aside nav
{
width:256px;
}
body aside nav a
{
border-top:22px solid #a6a6a6;
border-bottom:22px solid #a6a6a6;
border-left:22px solid #a6a6a6;
display:block;
text-decoration:none;
line-height:20px;
}
body aside nav a strong
{
background-color:#0088b9;
border-bottom:1px solid #FFF;
color:#FFF;
display:block;
font-size:20px;
text-align:center;
}
body aside section.screen
{
top:68px;
}
body aside section.screen a
{
display:block;
padding:17px 22px;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=0" />
<title></title>
<link rel="stylesheet" href="style.css" />
</head>
<body>
<section>
<article>
<section class="title">
Überschrift Lorem ipsum3
</section>
<section class="header">
Einleitung Lorem ipsum dolor sit amet, consetetur sadip scing elitr, sed diam nonumy eirmod tempor.
</section>
<section class="text">
<p>Text Lorem ipsum dolor sit ametsadipscing elitr, sed invidunt takimata</p>
</section>
<section class="list">
<ul>
<li>Item 1</li>
<li>Item 2</li>
</ul>
</section>
<section class="images">
<figure>
<img src="5747714470_334146faa9_b.jpg" alt="Macaque in the trees">
<figcaption>Text Lorem ipsum</figcaption>
</figure>
<figure>
<img src="5747165065_67cbfa0a09_b.jpg" alt="Macaque in the trees">
<figcaption>Text Lorem ipsum</figcaption>
</figure>
</section>
<section class="image">
<figure>
<img src="5747167101_33b788b4dd_b.jpg" alt="Macaque in the trees">
<figcaption>Text Lorem ipsum</figcaption>
</figure>
</section>
<section class="rule"></section>
</article>
<aside>
<nav>
<a href="/"><strong>Zurück</strong></a>
</nav>
<section class="screen">
<a href="/" class="video">Lorem ipsum dolor sit amet</a>
<a href="/" class="image">Lorem ipsum dolor sit amet</a>
</section>
<section class="downloads">
<a href="/" class="pdf">Lorem ipsum dolor sit amet</a>
</section>
</aside>
</section>
</body>
</html>