css - 将文本与 float img 对齐

Question

我想要完成的是让文本与 float img 的顶部和左侧对齐，并立即在下方无边距地换行。当我注释掉“p”中的填充时，图像没有底部边距，但我希望填充属性在我的样式表中处于事件状态。

http://codepen.io/BennyHH/pen/vGxVwz HTML

<div id="box">
  <div id="xob">
  </div>
  <p><!-- Text --></p>
</div>

CSS

#box {
 width: 300px;
 height: 300px;
 background: silver;
}

#xob {
 width: 50px;
 height: 55px;
 background: blue;
 float: left;
 margin: 15px 15px 0;
}

p {
 padding: 13px 13px 0;
}

* {
 box-sizing: border-box;
}

Answer 1

完全不清楚预期的结果是什么，但我认为您只需要图像/ float 元素的负底部边距。

What I want to accomplish is for the text to be aligned with the top and left side of the floated img and to wrap immediately underneath with no margin.

#box {
  width: 300px;
  height: 300px;
  background: silver;
}
#xob {
  width: 50px;
  height: 55px;
  background: blue;
  float: left;
  margin: 13px;
  margin-bottom: -13px;
}
p {
  padding: 13px;
}
* {
  box-sizing: border-box;
}

<div id="box">
  <div id="xob">
  </div>
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
</div>