<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>test</title>
<script src="jquery.js"></script>
<style>
body,ul,li{margin:0;padding:0;}
ul,li{list-style:none;}
#test{
margin:20px;
width:390px;
background:#F4F8FC;
border-radius:3px;
border:2px solid #D7E2EC;
}
#test li{
height:25px;
line-height:25px;
padding:5px;
border-bottom:1px dotted #D5D5D5;
margin-bottom:-1px;
}
</style>
</head>
<body>
<ul id="test">
<li>Test</li>
<li>Test</li>
<li>Test</li>
<li>Test</li>
<li>Test</li>
</ul>
</body>
</html>
分享到：
相关推荐
具体来说，在CSS2.1规范中，对于垂直方向上的`margin`，当它们之间没有非空内容、`padding`区域、`border`边框或者使用了清除（clearing）技术时，这些垂直`margin`就有可能发生折叠。 #### 三、`margin` 折叠的...
- 通过 `margin-left` 和 `margin-top` 的负值来调整 div 的中心位置。 - 最重要的是，设置 `display: flex;` 及其子属性 `justify-content: center;` 和 `align-items: center;` 来实现内容的水平垂直居中。 3. ...
- 父子元素的margin重叠：当父元素与其子元素相邻的边距之间没有其它内容（比如边框、内边距、非空内容或可见的后代元素）时，这两个边距会折叠。 - 元素自身的margin-bottom和margin-top相邻时也会折叠。 5. 折叠...
垂直居中可以通过 line-height 的值等于 height 值、top 50% + margin-top 负值、transform: translate(-50%, -50%)、top, left, bottom, right = 0 + margin: auto 等方式实现。 CSS 图文样式 1. Line-height 的...
- `border-radius` 用于创建圆角边框，可以使用长度值（不允许负值）或百分比来设定圆角半径，如`border-top-left-radius`设置对象左上角的圆角。 2. 背景（Background） - `background` 是一个复合属性，用于...
通过设置盒子模型的基本属性，可以实现各种布局，例如水平居中、垂直居中、固定宽度和高度等。 4. 盒子模型的实现 盒子模型可以通过CSS样式来实现，例如： * margin：设置外边距的值，例如margin: 1px 2px 3px 4...
外边距（margin）则是元素边框与相邻元素之间的距离。同样，有margin-top、margin-right、margin-bottom和margin-left，以及简写形式`margin`。与内边距不同，外边距可以设置为负值，从而实现某些特殊布局效果。例如...
5. **非替换内联元素**：对于非替换内联元素，垂直`margin`不起作用，这意味着`margin-top`和`margin-bottom`不会改变非替换内联元素的高度或位置。 ### `margin`的基本写法 `margin`属性可以采用多种语法形式来...
3. **边距补偿**：由于边框占据了一部分空间，可能会导致内容区域内部的垂直间距不均匀。为了解决这个问题，可以使用负的`margin`来抵消边框的宽度。 ```css .equal-height-columns { display: flex; } .equal-...
盒模型是指网页元素（如div、p等）在页面上的表现形式，包括内容区域（content）、内边距（padding）、边框（border）和外边距（margin）。 外边距（margin）是元素周围的空间，用于控制元素与元素之间的距离，以及...
CSS 盒子模型是网页设计中理解元素布局的基础，它定义了元素的四个部分：内容区域（content）、内边距（padding）、边框（border）和外边距（margin）。内容区域是元素实际显示的数据部分，内边距是内容与边框之间的...
类似地，要实现垂直居中，则需要设置元素的高度，并对 `margin-top` 和 `margin-bottom` 使用负值，即 `-(高度 + 上下padding + 上下border)/2`。通过将元素的 `position` 属性设置为 `absolute`，然后使用 `top: 50...
在实现上下垂直居中的布局时，我们可以使用 margin、position + margin (负值)、flex、IFC + vertical-align: middle 等方案。其中，在定高方案中，我们可以将元素高度设置为 100px，然后将 margin 设置为 50px 0 ...
void setSeriesOutLineStroke(int series,Stroke stroke) 指定分类的图形边框的线条笔触 void setSeriesPaint(int series,Paint paint) 指定分类图形的颜色 void setSeriesShape(int series,Shape shape) 指定分类...
要消除这一差异，可以减少代码中的空白字符，或者使用负值`margin`进行调整。 4. **不规范代码的处理**： - IE通常能容忍缺少的关闭标签，而Firefox则可能导致布局混乱。遵循严格的HTML和CSS标准能减少这类问题。 ...
然后使用`margin`的四个值为负值的方式来实现居中，其值为宽度和高度一半的负值。 尽管以上方法在不同浏览器间具有良好的兼容性，但值得注意的是，并非所有示例都兼容IE8。在IE8中，`display: table-cell`和`box-...
3. **垂直偏移量**：决定阴影在垂直方向上的位移。正值会使阴影向下移动，负值则使阴影向上移动。 4. **模糊半径**：用于控制阴影边缘的模糊程度。数值越大，阴影边缘越模糊。如果设置为0，阴影将没有模糊效果。 5...
这种方法的一个弊端是在标准浏览器下不能使用margin属性，而且在IE8中设置边框无效。 方法二则是使用CSS Hack，即通过条件注释针对IE6/7进行特定的设置，而不影响标准浏览器。具体步骤如下： 1. 设置#box的display...
因此，开发者在使用margin属性时需要考虑到这些差异，使用前应进行充分测试，或使用CSS重置（reset.css）来消除浏览器默认样式的影响。 总之，理解CSS中的margin属性是创建良好布局的关键。通过掌握margin的基本...