块元素的垂直间距 [英] Vertical spacing of block elements

问题描述

我在图片旁边安排了几个块级元素，并使用以下HTML / CSS定位所有内容：

 < style> 
 #logo p {
 font-size：24px; 
 margin-left：220px; 
 margin- top：-27px; 
} 
 
 #logo img {
 position：absolute; 
 top：10px; 
} 
 
 #logo #a {
 padding-top：43px; 
} 
< / style> 
 
< div id =logo> 
< p id =a>标签A< / p> 
< p id =b>标签B< / p> 
< img src =http://upload.wikimedia.org/wikipedia/commons/thumb/5/51/IBM_logo.svg/200px-IBM_logo.svg.png/> 
< / div> 
  

（此处可编辑版本： http://jsfiddle.net/49cAv/1/ ）

为了让两个P元素更接近我使用 margin-top：-27px; 和 padding-top：43px; 的组合，这看起来有点笨重。

这是否有更好的/更清洁的方法？

解决方案

这是我的解决方案：

html

 < div id =logo> 
< div id =imgCont> 
< img src =http://upload.wikimedia.org/wikipedia/commons/thumb/5/51/IBM_logo.svg/200px-IBM_logo.svg.png/> 
< / div> 
< div id =labelCont> 
< p id =a>标签A< / p> 
< span style =clear：left>< / span> 
< p id =b>标签B< / p> 
< / div> 
 
< / div> 
  

css

pre> * {
padding：0;
margin：0;
}

#logo p {
font-size：24px;
}

#logo img {
position：relative;
}

#imgCont {
float：left;
}

#labelCont {
float：left;
padding：15px;
}


fiddle

I'm arranging a couple of block level elements next to an image and have used the following HTML/CSS to position everything:

<style>
#logo p {
    font-size: 24px;
    margin-left: 220px;
    margin-top: -27px;
}

#logo img {
    position: absolute;
    top: 10px;
}

#logo #a {
    padding-top: 43px;
}
</style>

<div id="logo">
  <p id="a">Label A</p>
  <p id="b">Label B</p>
  <img src="http://upload.wikimedia.org/wikipedia/commons/thumb/5/51/IBM_logo.svg/200px-IBM_logo.svg.png" />
</div>

(Editable version here: http://jsfiddle.net/49cAv/1/)

To get the two P elements closer I've used a combination of margin-top: -27px; and padding-top: 43px; which seems a bit clunky.

Is there a better / cleaner way of doing this?

解决方案

Here is my solution:

html

<div id="logo">
    <div id="imgCont">
     <img src="http://upload.wikimedia.org/wikipedia/commons/thumb/5/51/IBM_logo.svg/200px-IBM_logo.svg.png" />
    </div>
    <div id="labelCont">
      <p id="a">Label A</p>
        <span style="clear:left"></span>
      <p id="b">Label B</p>
    </div>

</div>

css

*{
    padding:0;
    margin:0;
}

#logo p {
    font-size: 24px;
}

#logo img {
    position: relative;
}

#imgCont{
    float:left;
}

#labelCont{
    float: left;
    padding: 15px;
}

fiddle

这篇关于块元素的垂直间距的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！