设置display:block
我们可以看出a标签的高度和宽度发生了变化,而且在设置为块级元素后,占据了一整行的位置。
高度发生变化
解决方法2-设置浮动
通过将a标签设置为浮动状态,同样可以改变其高度和宽度。
我们给a标签设置以下css样式。
设置为浮动元素
我们可以看出a标签的高度和宽度发生了变化,并且其占据的宽度和设置的width属性一样,与方法1呈现的不一样。
改为浮动元素
方法3-设置padding属性
在设置padding属性的时候,不能直接改变a标签的高度和宽度,实际是一种模拟的状态。
而且需要注意的是在设置padding-top和padding-bottom时是不生效的,即使从控制台看元素显示占据了空间,但不会影响页面的布局。因此在设置padding属性时,实际只会影响到a标签的宽度。
我们给a标签设置以下padding属性。