Question

我想了解如何在图片和文字之间留出空间。现在图像和文字紧密相连。就像文本和图像之间没有空格一样。我试图做边距和填充，但他们没有工作。而且我希望我的文字不会出现在图片之下，而是因为它不是在图像下面。

谢谢你的回答。

Answer 1

请在div类中添加选择器（。）

.paragraph1 {
    margin-right: 3px;
}
.img_dentist {
   width: 400px;
    height: 350px;
    margin-left: 40px; 
}

参见演示http://jsfiddle.net/JentiDabhi/c12L6vdy/2/

Answer 2

首先你忘了把“。”在您的选择器中，您不希望文本在图像下方，在这种情况下您不能使用像素，因为当屏幕变小时，文本将在图像下方而不是使用百分比。您还必须删除“p”元素中的图像元素。

试试此代码

<强> HTML

<img src="Images/female_dentist.jpg" class="img-thumbnail img_dentist"  alt='Dentist'></img>

<p class="paragraph1" >
    She is an accomplished dentist with extensive postdoctoral experience and superior knowledge of orthodontics and laser therapy.  Her experience with dentistry  extends for over 25 years, with 15 years of orthodontics leading her to publish over 30 professional publications and hold a patent in orthodontics' laser therapy in _. </p>

<强> CSS

* {
    padding: 0; margin: 0;
}
.paragraph1 {
    margin-left: 10px;
    display: inline-block;
    float:left;
    width:40%;
}

.img_dentist {
    width: 40%;
    height: 350px;
    margin-left: 10px; 
    display: inline-block;
    float:left;
}

参见[demo]（http://jsfiddle.net/gmhuk3kq/7/）

图像和文本之间的空间

2 个答案: