关于margin和padding的使用

问题1：这里右边医院公告区域的内容下面显示不下了，辛苦老师帮忙分析一下，是因为margin和padding使用不规范导致的吗？😭

问题2：dd标签内容的首行缩进要怎么取消？使用了text-indent无效

小英雄哪托 2022-03-30

源自：浮动与定位 4-9 小慕医生项目开发（6）

收起

2回答

好帮手慕星星回答被采纳获得+3积分 2022-03-30 15:01:53

同学你好，解答如下：

1、代码是修改过后的吗？这边测试效果没问题

一些css基础样式用的是源代码的

2、dd标签的左侧间距是margin-left值为40px，不是text-indent缩进的值，所以设置text-indent值无效

上面老师添加在基础样式，去掉标签默认间距后就没问题了。

如果自己写的基础样式和课程中不一致，建议修改为一样，避免效果出错。自己再测试下。

收起回答

小英雄哪托提问者 #1

感谢老师~

2022-03-30 16:15:13

好帮手慕星星 2022-03-30 13:06:01

同学你好，从截图中无法发现问题，建议将html和css代码粘贴上来，不要截图，便于帮助测试。

祝学习愉快~

收起回答

提问者小英雄哪托 #1

  <!-- 医院动态和医院公告区域 -->
        <div class="news-and-notice">
            <!-- 医院动态 -->
            <div class="news">
                <p>医院动态</p>
                <div class="news-content">
                    <!-- 新闻图片 -->
                    <div class="hot-news">
                        <img src="./images/news_pic.png" alt="">
                        <!-- 新增图片上的遮盖层文字 -->
                        <div class="zgc">“全国首届健康预防与商业医疗保险论坛”在北京举办</div>
                    </div>
                    <!-- 新闻列表 -->
                    <ul>
                        <li><a href="#">年度医疗机构用血自查评分表和科室基本信息表</a><span>03-30</span></li>
                        <li><a href="#">关于上报北京市医疗机构临床用血信息的通知</a><span>03-30</span></li>
                        <li><a href="#">北京医院输血科通过验收并获批开展“临床基…</a><span>03-30</span></li>
                        <li class="spec"><a href="#">国家药品监督管理局关于修订都梁软胶囊非处…</a><span>03-30</span></li>
                        <li><a href="#">关于将多拉司琼注射剂等药品纳入本市基本医…</a><span>03-30</span></li>
                        <li><a href="#">关于调整完善本市基本医疗保险门诊特殊疾病…</a><span>03-30</span></li>
                        <li><a href="#">广东省药学会：关于印发《超药品说明书用药…</a><span>03-30</span></li>
                        <li><a href="#">人力资源社会保障部关于将36种药品纳入国家…</a><span>03-30</span></li>
                    </ul>
                </div>
            </div>

            <!-- 医院公告 -->
            <div class="notice">
                <p>医院公告</p>
                <ol>
                    <li>
                        <div class="number">01</div>
                        <dl>
                            <dt><a href="">《养生堂》</a></dt>
                            <dd><a href="">公郭立新主任 特殊时期糖尿病人的新冠…</a></dd>
                        </dl>
                    </li>
                    <li>
                        <div class="number">02</div>
                        <dl>
                            <dt><a href="">《养生堂》</a></dt>
                            <dd><a href="">王少为主任 新型冠状病毒防控指引十八…</a></dd>
                        </dl>
                    </li>
                    <li>
                        <div class="number">03</div>
                        <dl>
                            <dt><a href="">《我要当医生》</a></dt>
                            <dd><a href="">谭玲副主任 李同舟 姚晨蕊药师</a></dd>
                        </dl>
                    </li>
                    <li>
                        <div class="number">04</div>
                        <dl>
                            <dt><a href="">《全民健康学院》</a></dt>
                            <dd><a href="">王建业院长 “医”路有你 健康同行</a></dd>
                        </dl>
                    </li>
                    <li>
                        <div class="number">05</div>
                        <dl>
                            <dt><a href="">《健康北京》</a></dt>
                            <dd><a href="">王建业院长 莫把衰老当病治</a></dd>
                        </dl>
                    </li>
                </ol>
            </div>
        </div>
        
     -------------------css---------------------
     /* 医院动态和公告区域 */
.content .news-and-notice{
    width: 1200px;
    height: 376px;
    /* background-color: #00978E; */
    margin: 0 auto;
    margin-top: 56px;
    overflow: hidden;
    margin-bottom: 20px;
}
.content .news-and-notice .news{
    float: left;
    width: 798px;
    height: 376px;
}
.content .news-and-notice .news p{
    width: 64px;
    height: 21px;
    font: 16px/19px Helvetica;
    /* margin-bottom: 27px; */
}
.content .news-and-notice .news .news-content{
    width: 838px;
    height: 328px;
}
.content .news-and-notice .news .news-content .hot-news{
    float: left;
    width: 422px;
    height: 328px;
    margin-right: 15px;
    position: relative;
}
.content .news-and-notice .news .news-content .hot-news .zgc{
    width: 422px;
    height: 40px;
    position: absolute;
    bottom: 0;
    background: rgba(8,8,8,0.40);
    font-size: 14px;
    color: white;
    text-align: center;
    font-family: Helvetica;
    line-height: 40px;
}
.content .news-and-notice .news .news-content ul{
    float: left;
    width: 400px;
}
.content .news-and-notice .news .news-content ul li{
    font: 14px/38px Helvetica;
   
}
.content .news-and-notice .news .news-content ul li a{
    float: left;
    color: #000;
   
}
.content .news-and-notice .news .news-content ul li.spec a{
    color: #00978E;
}
.content .news-and-notice .news .news-content ul li span{
    float: right;
    padding-right: 40px;
}
/* ----医院公告区域----- */
.content .news-and-notice .notice{
    float: left;
    width: 323px;
    height: 376px;
}
.content .news-and-notice .notice p{
    width: 64px;
    height: 21px;
    font: 16px/21px Helvetica;
    margin-bottom: 20px;
}
.content .news-and-notice .notice ol li{
    /* height: 57px; */
    overflow: hidden;
    margin-bottom: 11px;
}
.content .news-and-notice .notice ol li .number{
    float: left;
    background-color: #00978E;
    color: white;
    font-size: 30px;
    width: 53px;
    height: 57px;
    text-align: center;
    line-height: 57px;
    margin-right: 9px;
}
/* .content .news-and-notice .notice ol li dl{
    float: left;
    height: 57px;
    color: #000;
} */
.content .news-and-notice .notice ol li dl dt a{
    color: #666;
   
}
.content .news-and-notice .notice ol li dl dd a{
    color: #999;

2022-03-30 14:01:31