html–div顶部和底部减去20个像素

概述作为一个简单的例子,我有两个非常简单的div：(绿色的是红色的)现在我如何从绿色div的底部和顶部减去20个像素？HTML：<div id='container'> <div id='rows'> </div> </div> CSS：#container { width: 200

作为一个简单的例子,我有两个非常简单的div：

(绿色的是红色的)

现在我如何从绿色div的底部和顶部减去20个像素？

HTML：

CSS：

#container {    wIDth: 200px;    height: 300px;    background: red;}#rows {    wIDth: 50%;    height: 100%;    /* margin-top: 20px;        margin-bottom: 20px; */   /*  padding-top: 20px;    padding-bottom: 20px; */    /*     top: 20px;    bottom: 20px;      height: auto; */    background: green;}

http://jsfiddle.net/clankill3r/2L6c2bLf/1/最佳答案这是一种方法,无需在父div中添加填充或在子div中使用calc.

JSFIDDLE

#container {    wIDth: 200px;    height: 300px;    background: red;    position: relative;}#rows {    position: absolute;    wIDth:50%;    top: 20px;    bottom: 20px;    background: green;}

总结

以上是内存溢出为你收集整理的html – div顶部和底部减去20个像素全部内容，希望文章能够帮你解决html – div顶部和底部减去20个像素所遇到的程序开发问题。

如果觉得内存溢出网站内容还不错，欢迎将内存溢出网站推荐给程序员好友。

欢迎分享，转载请注明来源：内存溢出

原文地址: http://outofmemory.cn/web/1145352.html