带有图像的CSS填充问题

时间:2013-02-25 20:40:03

标签: css

我遇到了围绕图片的填充p文本的问题: 有没有人看到这个问题?

我试图添加填充CSS“p”元素,但这没有效果:

enter image description here

以下是相关的HTML:

    <div id="mid-featureleft" class="rounded">
        <div class="contentheader">
            <h1>Georgio Varsari Painters</h1>
        </div>
        <div class="imagebox">
            <img height="200px" width="303px" src="Images/Home/HomePage1.jpg" alt="Welcome to Vasari's" style="margin: 0 0 0 0;" />
        </div>
        <p>
            Established in 1965, the Vasari's Team of Painters and Craftsmen have over 100 years of combined experience delivering impeccable Museum Quality Painting Services for Customers in Washington DC and Northern Virginia. 
            We have experience with every type painting project that exists.  For that reason, we are able to take on some of the more difficult restoration jobs that other Painting Companies shy away from.</p> 
        <p>
            Christian Vasari has nearly three decades of painting experience working under the auspices of his father and Company Founder, Anthony Vasari. 
            You will have the comfort of knowing that your Home and Property is in the right hands of a heavily experienced and knowledgeable group of Professionals who have successfully completed thousdands of painting projects.</p>
    </div>

以下是相关的CSS:

#mid-featureleft {
    height:250px;
    width:609px;
    margin: 12px 0 0 0;
    float:left;
    position:relative;
    background-color:#E7EFF7;
    /*background-color:orange;*/
}
#mid-featureleft h1 {
    color: red;
    font-family: Arial;
    font-size:25px;
}
#mid-featureleft p {
    color: #333366;
    margin: 0 0 0 0;
    font-size:12px;
    /*line-height:14px;*/ 
    padding: 5px 5px 5px 5px;
}
#mid-featureleft .contentheader {
    height:30px;
    width:302px;
    text-align:left;
    line-height:29px;
    display: block;
    float: left;
    margin:0 0 0 0;
    padding: 0 0 0 4px;
    position:relative;
}
#mid-featureleft .imagebox {
    height:200px;
    width:303px;
    /*display: block;*/
    float: right;
    margin:0 0 0 0;
    padding: 0 0 0 0;
    /*background-color:green;*/
}

2 个答案:

答案 0 :(得分:3)

您必须为此元素添加边距

#mid-featureleft .imagebox { margin: 0 0 15px 15px; }

答案 1 :(得分:0)

为示例添加一些余量:

#mid-featureleft .imagebox { margin:10px;}