我无法弄清楚这个填充物。我想在我的主页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>
»try scrolling this page up and down«
</p>
</div>
</div>
我很难看到包装器的边距和填充位置,以及它与每个元素(照片和文本框)填充和边距的交互方式。这是编码的正确方法吗?
谢谢!
答案 0 :(得分:0)
.photo_home {
...
padding-left: 10px;
padding-top: 10px;
...
}
这不会与它有任何关系,不是吗?尝试去除那里的填充线。
答案 1 :(得分:0)
您正在添加填充。如果您不希望填充显示背景,则有两种选择。
将其切换为保证金:
.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;
}