删除 <hr> 和 <div> 之间的间距

时间:2021-05-11 18:56:14

标签: html css

我试图将 div 放在 hr 标签的正下方,但它似乎不起作用。我尝试添加 padding: 0;边距:0;相反,什么都没有改变。现在我有这个:

enter image description here

但我想要像下图这样的东西:

enter image description here

HTML:

<hr class="hr">
        
<div class="alttxt">
  <p> Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor 
  incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis knostrud 
  exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure 
  dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. 
  Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt 
  mollit anim id est laborum. </p>
</div>

CSS:

.hr {
    border: 3px solid #ffffff;
    margin: 0 5% 0 5%;
    padding-bottom: 0 !important;
}
.alttxt {
    background-color: rgba(1,1,1,0.5);
    margin-top: 0 !important;
    margin: 0 5% 0 5%;
}
.alttxt p {
    text-align: justify;
    padding: 3% 3% 3% 3%;
    color: white;
    font-size: 140%;
}

2 个答案:

答案 0 :(得分:3)

删除段落的默认边距

.hr {
  border: 3px solid red;
  margin: 0 5% 0 5%;
}
.alttxt {
  background-color: rgba(1, 1, 1, 0.5);
  margin: 0 5% 0 5%;
}
.alttxt p {
  text-align: justify;
  padding: 3% 3% 3% 3%;
  color: white;
  font-size: 140%;
  margin: 0;
}
<hr class="hr">
        
<div class="alttxt">
  <p> Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor 
  incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis knostrud 
  exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure 
  dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. 
  Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt 
  mollit anim id est laborum. </p>
</div>

答案 1 :(得分:-1)

播放 .alttxt 边距 我选择了 7% 这是我对您的 css 所做的唯一更改

.hr 
{
    border: 3px solid #0000ff;
    margin: 0 5% 0 5%;
    padding-bottom: 0 !important;
}

.alttxt
{
    background-color: rgba(1,1,1,0.5);
    margin-top: 0 !important;
    margin: 0 7% 0 7%;

    p
    {
        text-align: justify;
        padding: 3% 3% 3% 3%;
        color: white;
        font-size: 140%;
    }
}
相关问题