为什么链接背景重叠父母的同胞 [英] why do link background overlap parent's sibling
问题描述
我已经创建了以下非常简单的HTML页面
： < html&
< head>
< style>
a {
padding：5px;
background-color：blue;
color：white;
}
#header {
background-color：orange;
height：50px;
}
< / style>
< / head>
< body>
< div id =header>< / div>
< div>
< a href =/ foo> foo< / a>
< a href =/ foo> foo< / a>
< / div>
< / body>
< / html>
正如你可以在这个演示，链接的蓝色背景重叠他们父的兄弟的橙色背景（div与 id =header） 。
如果您尝试删除链接，添加维度到内联元素，一些属性将
应用，一些属性将部分应用，其他人将
不应用。最值得注意的属性是width，
height，margin和padding。
。
虽然填充可应用于内联元素的所有边，但只有
左右填充将对周围内容有影响。
我的解决方案：设置锚链接到 inline-block p>
* {margin：0; padding：0; -webkit-box-sizing：border-box; -moz-box-sizing：border-box; box-sizing：border-box;} a {padding：5px; background-color：blue;颜色：白色; display：inline-block;}＃header {background-color：orange; height：50px;}＃nav {background：red;}
< body> < div id =header>< / div> < div id =nav> < a href =＃> foo< / a> < a href =/ foo> foo< / a> < / div>< / body>
I've made the following very simple HTML page
<html>
<head>
<style>
a {
padding: 5px;
background-color: blue;
color: white;
}
#header {
background-color: orange;
height: 50px;
}
</style>
</head>
<body>
<div id="header"></div>
<div>
<a href="/foo">foo</a>
<a href="/foo">foo</a>
</div>
</body>
</html>
As you can see in this demo, the blue background of the links overlaps the orange background of their parent's sibling (the div with id="header"). How can I prevent this from happening without removing the links' padding?
If you try to add dimension to an inline element, some properties will be applied, some properties will be partially applied and others will not be applied at all. The most noticable properties are width, height, margin and padding. .
While padding can be applied to all sides of an inline element, only left and right padding will have an effect on surrounding content.
My solution: Set the anchor links to inline-block.
* {
margin: 0;
padding: 0;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
a {
padding: 5px;
background-color: blue;
color: white;
display: inline-block;
}
#header {
background-color: orange;
height: 50px;
}
#nav {
background: red;
}
<body>
<div id="header"></div>
<div id="nav">
<a href="#">foo</a>
<a href="/foo">foo</a>
</div>
</body>
这篇关于为什么链接背景重叠父母的同胞的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
