                        课程
                    
                        /前端开发
                        
                            /HTML/CSS
                        
                        /初识HTML(5)+CSS(3)

不定宽块状元素（设置display:inline;）

为什么需要单独给li设置css样式？

.container ul 不是已经包含所有后代吗？

慕斯卡0503862

2016-06-13

源自：初识HTML(5)+CSS(3) 15-6

关注问题我要回答

750

操作

收起

3 回答

_benny
2016-06-13

display、border、margin和padding属性是不继承的。

但是border、margin、padding可通过inherit实现继承，但display除外

____________________________________________________________________________

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

<html>

<head>

<title> inherit运用 </title>

<style>

.div1{

background-color:#eee;

width:320px;

height:150px;

padding:5px;

margin:10px;

border:5px solid #000;

}

.div1 div{

width:200px;

height:50px;

line-height:50px;

text-align: center;

color:#fff;

background-color:#f00;

font-size:8px;

}

.div1 p{

font-size:8px;

color:#fff;

background-color: #00f;

margin:0px;

}

#ib{

display:inline-block;

}

#yes2{

display:inherit;

border:inherit;

margin:inherit;

padding:inherit;

}

</style>

</head>

<body>

<div id='yes1'>不继承原始样式</div>

<p>测下边距块</p>

</div>

<div id='yes2'>继承(display无效,其他均有效)</div>

<p>测下边距块</p>

</div>

</script>

</body>

</html>

1 回复有任何疑惑可以回复我~

收起回答

大块吃肉188

我试了一下，对于#yes1和#yes2的padding效果与否继承感觉没区别这是怎么回事？是因为对.div1 div{text-align}的原因么?还有这句 #ib{display:inline-block;}设置成内联块级元素后效果我没发现效果求这是为什么，只是在把这句去掉后发现.div之间的外边距变小

2016-07-03 回复有任何疑惑可以回复我~

_benny 回复大块吃肉188

非常抱歉哈，上面的代码还是有点bug的，对display的阐述并不是清晰；；；对于你的问题，1、padding没看出来，是因为他的值是5px，你改成25px或者更大点就有看见了，2、display本身各浏览器对 'display' 特性值的支持程度不同的，并且'inherit'的支持也是不同的，所以在不同版本的浏览器中呈现的效果是不同的。要详细了解还是需要多查阅一些文档的@_@~

2016-07-04 回复有任何疑惑可以回复我~

大块吃肉188 回复 _benny

非常感谢。把padding改成50px后效果看出来了。

2016-07-04 回复有任何疑惑可以回复我~