外边距图片首字母下沉

<p class="p1"><span class="picdrop">m<span></span></span>
       arginal Graphic Dropcap(外边距首字母下沉)。字母M被一个下沉图片覆盖了。        读屏器阅读文本，可视用户则看到图片。
        如果流浪器不能显示下沉图片，文本就会显示出来。
</p>
     .p1{ position: relative;         margin-left: 120px;         width: 300px;}

.picdrop{ position: absolute;          width: 120px;          height: 90px;          left: -120px;          top: 0;}

.picdrop span{position: absolute;          width: 120px;          height: 90px;          left:0;          top: 0;          margin:0;         background: url("images/m.gif") no-repeat;}

效果图：

时间： 2024-08-08 01:28:17

外边距图片首字母下沉的相关文章

认识W3C标准盒子模型，理解外边距叠加

概述: 注:加粗斜体字是非常重要的概念,决定着你是不是能看懂那句话,所以不懂的请一定要搜索一下. 页面上的每个元素,都在一个矩形框里. 每个矩形框都是一个盒模型. 每个盒模型都由内容区域(content).边框(border ).内填充(padding)和外边距(margin)组成. 这四个属性都可以独立存在.也就是说,一个盒子可以只有content,也可以只有border,也可以只有padding,也可以只有margin. (图片来自网络) 关于margin: 可以有负值 Negative v

css中的margin及外边距折叠

平时在工作中,总是有一些元素之间的边距与设定的边距好像不一致的情况,一直没明白为什么,最近仔细研究了一下,发现里面有学问:垂直元素之间的margin有有互相重叠的情况:新建一个BFC后,会阻止元素与外界元素的重叠现象. 先了解几个概念:可替换元素.不可替换元素(non-replaced element).包含块(containing block).块级格式化上下文(BFC). 1.可替换元素与不可替换元素 根据css1 中所述:所谓可替换元素就是浏览器根据元素的标签和属性,来决定元素的具体显示内

css系列-段落首字符下沉、缩进及特殊显示

<!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="Generator" content="EditPlus®"> <meta name="Author" content=""> <meta name="

理解CSS外边距margin

前面的话   margin是盒模型几个属性中一个非常特殊的属性.简单举几个例子:只有margin不显示当前元素背景,只有margin可以设置为负值,margin和宽高支持auto,以及margin具有非常奇怪的重叠特性.之前的博文中已经分别详细地介绍了margin的基础知识和负margin的详细用法.本文将详细介绍外边距margin的几个重点部分,包括重叠.auto和无效情况 重叠 [前提]   margin重叠又叫margin合并,发生这种情况有两个前提   1.只发生在block元素上(不包

css内边距与外边距的区别

你真的了解margin吗?你知道margin有什么特性吗?你知道什么是垂直外边距合并?margin在块元素.内联元素中的区别?什么时候该用 padding而不是margin?你知道负margin吗?你知道负margin在实际工作中的用途吗?常见的浏览器下margin出现的bug有哪些?…… 写css,你少不了与margin打交道,而对于这个平时我们最常用的css属性我们并非十分了解.介于此我打算写下这篇文章,一来是自己工作中的总结,也是对自己知识的一次梳理. Margin是什么 CSS 边距属性

css中外边距

1.内部元素设置margin等,父元素高度不能适应 1 .classA { 2 height: 200px; 3 background-color: cornflowerblue; 4 overflow: hidden; /*解决高度不能适应*/ 5 } 6 .classB { 7 width: 1000px; 8 height: 100px; 9 background-color: red; 10 margin: 0 auto; 11 margin-top: 50px; 12 } 13 14

在vc中实现获取汉字拼音的首字母

在vc中实现获取汉字拼音的首字母 void GetFirstLetter(CString strName, CString& strFirstLetter){    TBYTE ucHigh, ucLow;    int  nCode;    CString strRet;    strFirstLetter.Empty();    for (int i=0; i<strName.GetLength(); i++)    {        if ( (TBYTE)strName[i] <

android 4.4.3上面，联系人的头像默认显示首字母，但是不支持中文字符,修改支持中文

在android 4.4.3上面,联系人的头像默认显示首字母,但是不支持中文字符,如下图: 如果联系人名字的第一位是英文字符(a-z || A-Z),则默认头像将显示该首字母. 如果支持中文时显示第一个汉字,那就happy了. 那就看看如何通过修改源代码来实现这一小功能吧- 我们还是先了解下联系人头像加载的流程吧- 联系人头像加载这个问题还是很有意思的,在Contacts中使用ContactPhotoManager类(严格来讲是这个类的子类)来实现头像的异步加载. 这个类还使用了LruCache

外边距合并

前提 只有在普通文档流中垂直相邻外边距会合并. 行内框,浮动框或者绝对定位之间的外边距不会合并. 1.相邻元素有多个外边距 1 <ul> 2 <li>line 1</li> 3 <li>line 2</li> 4 </ul> 5 <h3>This is h3 line.</h3> 1 ul{margin-bottom:15px;} 2 li{margin-top:10px;margin-bottom:20px;