老师 这个dd标签里的东西没办居中啊

老师 这个dd标签里的东西没办居中啊

就是我给dd 里面的p标签设置margin-top属性往下移为什么是整个dd的内容向下移动 

<!DOCTYPE html>

<html>

<head>

<meta charset="UTF-8">

<title>Document</title>

<style type="text/css">

*{

padding:0;

margin:0;

}

.gallery .gallery-top{

font-size:30px;

font-family:"微软雅黑";

font-weight:bolder;

margin-top:35px;

text-align:center;

}

.gallery .hr{

width:100%;

text-align:center;

margin-top:20px;

margin-bottom:20px;

}

.gallery .m-word{

text-align:center;

text-size:14px;

text-weight:350;

color:gray;

margin-bottom:20px;

}

.gallery .content{

width:1000px;

margin:0 auto;

overflow:hidden

}

.gallery .content dl{

width:300px;

float:left;

margin-left:20px;

}

.gallery .content dl dd{

color:white;

background:black;

height:60px;

}

.gallery .content dl dd span{

line-height:60px;

margin-left;20px;

}

.gallery .content dl dt img{

width:300px;

height:200px;

display:block;

}

</style>

</head>

<body>

<div class="gallery">

<div class="gallery-top">GALLERY</div>

<div class="hr"><hr/></div>

<div class="m-word">

Lorem Ipsum is simply dummy text of the printing and typesetting<br/>

industryLorem lpsumhas been the industnys standard dummy<br/>

text ever since the 1500s.

</div>

<div class="content">

<dl>

<dt><img src="./03-01.jpg"></dt>

<dd><p>SCIENCE LAB</p></dd>

</dl>

<dl>

<dt><img src="./03-02.jpg"></dt>

<dd><p>INDOOR STADIUM</p></dd>

</dl>

<dl>

<dt><img src="./03-03.jpg"></dt>

<dd><p>TRANSPORTATION</p></dd>

</dl>

<dl>

<dt><img src="./03-04.jpg"></dt>

<dd><p>KIDS ROOM</p></dd>

</dl>

<dl>

<dt><img src="./03-05.jpg"></dt>

<dd><p>MEDITATION CLASSES</p></dd>

</dl>

<dl>

<dt><img src="./03-06.jpg"></dt>

<dd><p>KIDS PLAY GROUND</p></dd>

</dl>

</div>

</div>

</body>

</html>http://img1.sycdn.imooc.com//climg/5bcf01e30001218307220239.jpghttp://img1.sycdn.imooc.com//climg/5bcf020c0001cee403120112.jpghttp://img1.sycdn.imooc.com//climg/5bcf024300010bb609990140.jpg

正在回答 回答被采纳积分+1

登陆购买课程后可参与讨论,去登陆

2回答
妮可妮可妮_ 2018-10-24 09:40:03

http://img1.sycdn.imooc.com//climg/5bcfcc78000103c804510361.jpg

围绕在元素边框的空白区域是外边距。设置外边距会在元素外创建额外的“空白”。

想要实现p标签内的文字垂直居中显示,可以通过设置高度=行高实现效果,如下图所示:

http://img1.sycdn.imooc.com//climg/5bcfccac0001755e03490164.jpg

祝学习愉快!

  • 提问者 慕沐6577184 #1
    但是 老师我是给div里面的p标签使用外边距 它外层的div设置了大小的 对p标签使用margin-top它不是应该相对于外层包裹的div向下移动吗 怎么会连着父元素一起向下
    2018-10-24 09:45:21
  • 妮可妮可妮_ 回复 提问者 慕沐6577184 #2
    所有同级或者嵌套的盒元素,并且它们之间没有非空内容、Padding或Border分隔的两个或更多盒元素的margin将会合并为一个margin共享, 解决办法: 1. 父级或子元素使用浮动或者绝对定位absolute 浮动或绝对定位不参与margin的折叠 2. 父级overflow:hidden; 3. 父级设置padding(破坏非空白的折叠条件) 4. 父级设置border
    2018-10-24 10:44:08
提问者 慕沐6577184 2018-10-23 20:59:58

老师 我用position定位解决了居中但是 我想问一下为什么不能用margin-top属性而margin-left可以用

问题已解决,确定采纳
还有疑问,暂不采纳

恭喜解决一个难题,获得1积分~

来为老师/同学的回答评分吧

0 星
前端小白入门系列课程
  • 参与学习           人
  • 提交作业       11218    份
  • 解答问题       36713    个

从一个不会编程的小白到一个老司机是需要过程的,首先得入门,学习基础知识,然后才能进阶,最后再到精通,本专题是你走进前端世界的不二选择!

了解课程
请稍等 ...
意见反馈 帮助中心 APP下载
官方微信

在线咨询

领取优惠

免费试听

领取大纲

扫描二维码,添加
你的专属老师