zoukankan      html  css  js  c++  java
  • <span>和<a>的margin上下和padding上下不起作用的原因和解决

    使用到了<span>和<a>标签,发现在样式里面直接写margin-top、margin-bottom和padding-top、padding-bottom都不起作用,页面样式的东西懂得不多,搜索一番,发现是因为<span>和<a>都不是块级元素,所以这几个属性都无效。

    解决办法:在样式 中加入display:block;即可解决问题。

    span的样式中,为保证文字水平和垂直居中,需要添加如下的属性:
     text-align:center;
    line-height:20px;
    其中text-align:center;顾名思义,不需要解释了。line-height:20px;这个属性的值需要和span的高度保持一致。

    display:inline-block是行内的块级元素,它拥有块级元素的特点,可以设置长宽,可以设置margin和padding值,但它却不是独占一行的,它的宽带并不占满父元素,而是和行内元素一样,可以和其他行内元素排在同一行里。它集块级元素和行内元素的特点于一身。

      position:absolute和float会隐式地改变display类型,不论之前什么类型的元素(display:none除外),只要设置了position:absolute、float:left或float:right中任意一个,都会让元素以display:inline-block的方式显示。就算我们显示地设置display:inline或者display:block,也仍然无效(float在IE 6 下的双倍边距bug就是利用添加display:inline来解决的)。

      值得注意的是,position:relative却不会隐式改变display的类型。

  • 相关阅读:
    VOL.1 利用vmware ThinApp 制作非XP下可以运行的IE6 【无插件版】(windows vista/7/8 x86/x64 )
    js中each的用法
    Math函数floor、round、ceil的区别
    JS中的prototype解析
    Ubuntu虚拟机搭建
    我的第一篇blog
    实验四+124+高小娟
    实验三+124+高小娟
    第5次作业+105032014124+高小娟
    第4次作业类测试代码+105032014124+高小娟
  • 原文地址:https://www.cnblogs.com/vincentDr/p/4448756.html
Copyright © 2011-2022 走看看