无法将填充或边距应用于“前导”类 <p> 元素

【问题标题】：Unable to apply padding or margin to "lead" class <p> element无法将填充或边距应用于“前导”类 <p> 元素
【发布时间】：2015-12-31 15:07:57
【问题描述】：

我目前正在使用引导框架构建我的第一个网站，并希望在“前导”段落和我正在编写的以下博客页面的响应图像之间应用 30 像素的填充。然而，CSS 似乎没有对“lead”类 p 元素应用填充或边距。昨天工作正常，但从那以后我一直在摆弄布局，所以我不确定为什么这条规则现在没有触发？

同样，我昨天将“继续阅读...”包装在一个“浮动右”类中，它工作正常，但是今天再次摆弄 CSS，它默认位于列的左侧，所以我有应用 `text-align: right;在 CSS 中。是什么导致了这些异常？总的来说，我对 Bootstrap 和网站建设非常陌生，并且意识到我的代码可能杂乱无章或缺少关键信息，因此将不胜感激。谢谢，乔恩

http://www.jonhowlett.uk/blog.html

HTML:-

 <div id="blog">    
 <div class="container">
    <div class="row">
        <div class="col-md-8">
            <!--heading-->
            <h1>Latest Posts</h1>
            <!--list of posts-->
            <article><!--use to semantically markup each blog post, forum post, newspaper article etc., -->
            <h2><a href="#">Blog Post 1</a></h2>
                <div class="row">
                    <div class="group 1 col-sm-6 col-md-6"><!--grouped together category and tags into one column-->
                        <span class="glyphicon glyphicon-folder-open"></span> <a href="#">Open Folder</a>
                            <span class="glyphicon glyphicon-bookmark"></span> <a href="#">Bookmark 1</a>,<a href="#">Bookmark 2</a>, <a href="#">Bookmark 3</a>
                    </div>
                    <div class="group2 col-sm-6 col-md-6"><!--grouped together total comments and posted date--><!--GROUP2 is required to align both the total comments and published date to right in case of tablets and desktops-->

                        <span class="glyphicon glyphicon-pencil"></span> <a href="singlepost.html#comments">20 Comments</a>                             
                            <span class="glyphicon glyphicon-time"></span> Friday 2nd October 2015                       
                    </div>

                    <a href="singlepost1.html"><img src="images/blogpost1.jpg" class="img-responsive"></a>

                    <br />

                    <p class="lead"><!--LEAD class increases font size and makes it bold-->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 nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat</p>

                    <p>Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt.</p>
                    <span class="glyphicons glyphicons-circle-arrow-right"></span>
                    <p class="text-right"><!--TEXT-RIGHT class to align right...-->
                        <a href="singlepost1.html" class="text-right">
                            continue reading<span class="span_space"><span class="glyphicon glyphicon-chevron-right"></span></span>
                        </a>
                    </p>
                </div>
            </article>

            <hr class="hr"></hr>
            <article><!--use to semantically markup each blog post, forum post, newspaper article etc., -->
            <h2><a href="#">Blog Post 2</a></h2>
                <div class="row">
                    <div class="group 1 col-sm-6 col-md-6"><!--grouped together category and tags into one column-->
                        <span class="glyphicon glyphicon-folder-open"></span> <a href="#">Open Folder</a>
                            <span class="glyphicon glyphicon-bookmark"></span> <a href="#">Bookmark 1</a>,<a href="#">Bookmark 2</a>, <a href="#">Bookmark 3</a>
                    </div>
                    <div class="group2 col-sm-6 col-md-6"><!--grouped together total comments and posted date--><!--GROUP2 is required to align both the total comments and published date to right in case of tablets and desktops-->

                        <span class="glyphicon glyphicon-pencil"></span> <a href="singlepost.html#comments">20 Comments</a>                             
                            <span class="glyphicon glyphicon-time"></span> Friday 2nd October 2015                       
                    </div>

                    <a href="singlepost2.html"><img src="images/blogpost2.jpg" class="img-responsive"></a>

                    <br />

                    <p class="lead"><!--LEAD class increases font size and makes it bold-->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 nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat</p>

                    <p>Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt.</p>
                    <span class="glyphicons glyphicons-circle-arrow-right"></span>
                    <p class="text-right"><!--TEXT-RIGHT class to align right...-->
                        <a href="singlepost2.html" class="text-right">
                            continue reading<span class="span_space"><span class="glyphicon glyphicon-chevron-right"></span></span>
                        </a>
                    </p>
                </div>
            </article>
            <hr class="hr"></hr>
            <article><!--use to semantically markup each blog post, forum post, newspaper article etc., -->
            <h2><a href="#">Blog Post 3</a></h2>
                <div class="row">
                    <div class="group 1 col-sm-6 col-md-6"><!--grouped together category and tags into one column-->
                        <span class="glyphicon glyphicon-folder-open"></span> <a href="#">Open Folder</a>
                            <span class="glyphicon glyphicon-bookmark"></span> <a href="#">Bookmark 1</a>,<a href="#">Bookmark 2</a>, <a href="#">Bookmark 3</a>
                    </div>
                    <div class="group2 col-sm-6 col-md-6"><!--grouped together total comments and posted date--><!--GROUP2 is required to align both the total comments and published date to right in case of tablets and desktops-->

                        <span class="glyphicon glyphicon-pencil"></span> <a href="singlepost.html#comments">20 Comments</a>                             
                            <span class="glyphicon glyphicon-time"></span> Friday 2nd October 2015                       
                    </div>

                    <a href="singlepost3.html"><img src="images/blogpost3.jpg" class="img-responsive"></a>

                    <br />

                    <p class="lead"><!--LEAD class increases font size and makes it bold-->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 nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat</p>

                    <p>Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt.</p>
                    <span class="glyphicons glyphicons-circle-arrow-right"></span>
                    <p class="text-right"><!--TEXT-RIGHT class to align right...-->
                        <a href="singlepost3.html" class="text-right">
                            continue reading<span class="span_space"><span class="glyphicon glyphicon-chevron-right"></span></span>
                        </a>
                    </p>
                </div>
            </article>              
            <ul class="pager"> 
                <li class="previous">
                    <a href="#">Older</a>
                </li> 
                <li class="next">
                    <a href="#">Newer</a>
                </li> 
            </ul>
        </div>
        <div class="col-md-4">
        <!-- Other widgets -->
        </div>
    </div>
</div>
</div>

CSS:-

#blog_jumbotron .jumbotron {
background-image: url(images/blogpost_jumbotron3.jpg);
}

#blog h1 {
font-family:'Roboto', arial;
  font-size: 50px;
}

#blog h2 {
  font-family: 'Questrial', arial;
  font-size: 30px;
     padding-bottom: 25px;
  width: 100%;
}

#blog h2 a {
  color: #D35F45;
}

#blog img {
  padding-left: 20px;
  padding-right: 20px;
}

#blog p {
  font-family: 'Questrial', arial;
  margin-left: 15px;
  margin-right: 15px;
  text-align: left;
  font-size: 16px;
  line-height: 1.5;
}

#blog .lead {
  padding-top: 15px;
  padding-bottom: 15px;
  font-size: 20px;
  color: #303046;
  line-height: 1.7;
}

#blog .img-responsive {
  padding-top: 25px;
}

#blog .text-right {
  color: #D35F45;
  font-size: 16px;
  text-align: right;
}

#blog .pager a {
  background-color: white;
  border-radius: 0;
  border: 2px solid #7C7C7C;
  color: #7C7C7C;
  font-family: 'Questrial', arial;
  text-transform: uppercase;
  letter-spacing: 1px;
}

#blog .pager a:hover {
  background-color: #D35F45;
  border: 2px solid #D35F45;
  color: white;
  transition-duration: 0.3s;
}


#blog a img {
  float: left;
}

【问题讨论】：

标签： html css twitter-bootstrap margin padding


【解决方案1】：

你可以试试这个：

#blog_jumbotron .jumbotron {
  background-image: url(images/blogpost_jumbotron3.jpg);
}

#blog h1 {
  font-family:'Roboto', arial;
  font-size: 50px;
}

#blog h2 {
  font-family: 'Questrial', arial;
  font-size: 30px;
  padding-bottom: 25px;
  width: 100%;
}

#blog h2 a {
  color: #D35F45;
}

#blog img {
  padding-left: 20px;
  padding-right: 20px;
}

#blog p {
  font-family: 'Questrial', arial;
  margin-left: 15px;
  margin-right: 15px;
  text-align: left;
  font-size: 16px;
  line-height: 1.5;
}

#blog .lead {
  padding-top: 15px;
  padding-bottom: 15px;
  font-size: 20px;
  color: #303046;
  line-height: 1.7;
}

#blog .img-responsive {
  padding-top: 25px;
}

#blog .text-right {
  color: #D35F45;
  font-size: 16px;
  text-align: right;
}

#blog .pager a {
  background-color: white;
  border-radius: 0;
  border: 2px solid #7C7C7C;
  color: #7C7C7C;
  font-family: 'Questrial', arial;
  text-transform: uppercase;
  letter-spacing: 1px;
}

#blog .pager a:hover {
  background-color: #D35F45;
  border: 2px solid #D35F45;
  color: white;
  transition-duration: 0.3s;
}


#blog a img {
  float: left;
}
.next
{
    float:right;
 margin-top:-19px;
}

Demo Fiddle

【讨论】：

    【解决方案2】：

    将此添加到您的 lead 类的 css：-

    position:relative;
top:50px;
padding-bottom:50px;

    前两行用于移动段落，第三行用于平均移动文档的其余部分，即如果您想增加与顶部的距离，那么您还必须将padding-bottom 中的相同数量更新为与下方内容的其余部分保持距离。

    【讨论】：

      【解决方案3】：

      您不能在“前导”段落和响应式图像之间应用 30 像素的填充，因为 img 处于浮动模式，前导段落和图像变成一个块。 float 元素在您的段落周围浮动，因此在您的情况下，填充围绕图像。

      【讨论】：

        猜你喜欢
        • 1970-01-01
        • 1970-01-01
        • 2016-02-08
        • 2013-01-19
        • 2015-08-06
        • 1970-01-01
        • 1970-01-01
        • 2019-06-17
        • 2014-07-23
        相关资源
        最近更新 更多
        热门标签
        Java Python linux javascript Mysql C# Docker 算法 前端 SpringBoot Redis Vue spring 设计模式 .net core .net kubernetes c++ 数据库 数据结构 大数据 js 机器学习 微服务 Android Go 程序员 面试 JVM ASP.net core 云原生 人工智能 后端 PHP git CSS golang k8s Nginx Django mybatis 深度学习 多线程 React 架构 devops 爬虫 云计算 Spring Boot LeetCode