填充难题答案

【问题标题】：Padding Conundrum填充难题
【发布时间】：2013-03-08 11:07:06
【问题描述】：

我无法弄清楚这个填充。我想去掉我主页 claireisabelwebb.com 上照片周围细微的顶部和左侧填充。

这是我的 CSS：

/* Wrapper for Text and Photo on Home Page */

.wrapper_text_photo{ 
        display:block;
        /* float: left; */
        position: fixed;;
        background: rgba(0,0,255, 0);
        height: 800px;
        padding-top: 3px;
        padding-left: 10 px;
        margin-top:20px;
        /* margin-left:100px;*/
        margin-left:55px;
        /* margin-left:100px;*/
        margin-top: 232px;
}

/* Photo on Home Page */

.photo_home {
        float: left;
        margin-right:10px;
        padding-left: 10px;
        padding-top: 10px;
        background: rgba(0,0,255, 0);
}

/* Text on Home Page */

.home_text{ 
        display:block;
        position: fixed;
        background: rgba(255,255,255,.85);
        width:1100px;
        height: 480px;
        margin-left: 300px;
        padding-left: 10px;
        padding-right: 5px;

}
.home_text p img {
    float:left;
    background: rgba(255,255,255, .85);
}

还有html：

    <!-- Text and Photo __________________________________________-->

<div class="wrapper_text_photo">

    <div class="home_text">
            <p><img class="photo_home" src="http://claireisabelwebb.com/images/Home/claire-ed.jpg" alt="person_name" height="280px" />I graduated in YYYY from XXXX College with departmental honors in SUBJECT. As a junior, I participated in a XXXX mission in PLACE. <br><br>
            Email me at someemail@someemail.com.
            <br> 
            &raquo;try scrolling this page up and down&laquo;
            </p>
    </div>
</div>

我很难看出包装器的边距和内边距在哪里，以及它如何与每个元素（照片和文本框）的内边距和边距相互作用。这是正确的编码方法吗？

谢谢！！

【问题讨论】：

标签： html css wrapper margin padding

【解决方案1】：

.photo_home {
    ...
    padding-left: 10px;
    padding-top: 10px;
    ...
}

这不会碰巧与它有任何关系，不是吗？尝试删除那里的填充线。

【讨论】：

你总是比我早 30 秒得到答案。 ;)
人们在我所在的几个网站和聊天室中称我为狙击手：p
谢谢，我以前试过。很好，但我想要那个填充的间距。我只是不明白为什么它是白色的，而不是透明的。
尝试改用margin。

【解决方案2】：

您正在添加填充。如果您不希望填充显示背景，您有两种选择。

切换到边距：

.photo_home {
    float: left;
    margin: 10px 10px 0 10px;
    background: rgba(0, 0, 255, 0);
}

或使用此样式作为背景透明度：

.photo_home {
    float: left;
    margin-right: 10px;
    padding-left: 10px;
    padding-top: 10px;
    background: transparent;
}

【讨论】：