表格中的p标签的css

Question

我想在p标签前留一些空间。但是现在我坚持左侧。我想在p标签之前留下100px。 我附上了我的CSS和html.There名称和电子邮件被吓到了左边的位置。

＆＃13;

＆＃13;

p {
    margin-left:100px;
}
.outer {
    margin-left: 20%;
    margin-top: 0%;
    margin-bottom: 3%;
    height: 737px;
    width: 60%;
    box-shadow: 10px 10px 5px #888888;
    border: 1px solid #f9f2f2;
    border-radius: 10px;
}
button.logout {
    display:inline;
    float:right;
    margin-right:10px;
    margin-left: 5px;
}
.lout {
    float: right;
    display: inline-block;
    margin-top:20px;
}
.log {
    width:60%;
    height: 10%;
    position:absolute;
    border: 1px solid #f9f2f2;
    border-radius: 10px;
    border: 0px solid #f9f2f2;
    text-align: center;
    line-height:20px;
    border-width: 0px 0px 1px 1px;
    display:inline-block;
}
.rest {
    padding:7%;
    height: 580px;
    padding: 10% 7px;
}
.sidemenu {
    float: left;
    margin-top: 140px;
    width: 100%;
}
hr {
    margin: 0;
    width: 1px;
    height: 658px;
    border: 0;
    background: #000;
    float: left;
}
.content {
}
.side {
    width: 24%;
    float: left;
    display: inline-block;
}

＆＃13;

<div class="outer">
    <div class="log">
        <form name="profile" method="post" class="lout">
            <button class="done" name="done">Done</button>
            <button class="logout" name="logout">Logout</button>
    </div><!--End of log div -->
        
    <div class="rest">
        <div class="side">
            <div class="sidemenu"></div>
        </div><!--End of side div -->
        
        <hr>
        
        <div class="content">
             <h1>Profile</h1>

            <br>
            <br>
            <br>
            <br>
            <p>name</p>
            <p>email</p>
        </form>
    </div><!--End of content -->

＆＃13;

＆＃13;

＆＃13;

Answer 1

您的<div class="side">有一个float: left。但是由于div很短并且你的<div class="content">更长，它包围了div。您所需要的只是内容的浮动：

.content {
  float: left;
}