<CSS>为什么margin和top都设置为零了但是不置顶，有空隙_html/css_WEB-ITnose
就是子导航标题上面那点
<div id="head"> <ul class="ul1"> <li class="li1"><a>标题</a></li> <li class="li1"><a>标题</a> <div class="sonc" id="content"> <p class="sonh">标题</p> <ul> <li class="son">标题</li> <li class="son">标题</li> <li class="son">标题</li> <li class="son">标题</li> <li class="son">标题</li> <li class="son">标题</li> </ul> <p class="sonh">标题</p> <ul> <li class="son">标题</li> <li class="son">标题</li> <li class="son">标题</li> </ul> </div> </li> <li class="li1"><a>标题</a></li> </ul> </div>
<style> #head{ width: 100%; height: 80px; background-color: rgba(193, 193, 193, 0.7); } ul{ list-style: none; } .li1{ position: relative; float: left; font-size: 40px; font-weight: bold; margin: 20px 30px 0 10px; } .hover1{ color: #ffffff; border-bottom: 5px solid black; } .son{ font-size: 15px; padding: 2px; float: left; color: black; margin-right: 4px; margin-top: 4px; background-color: grey; } .son:hover{ background-color: #51dadd; } .li1 a{ text-decoration: none; } .sonh{ font-size: 15px; display: inline-block; position: relative; } .sonc{ border: 1px solid #a3a3a3; height: 160px; width: 140px; display: none; position: absolute; } </style>
回复讨论(解决方案)
*{margin:0;padding:0;}
*{margin:0;padding:0;}没用的 而且盒子模型里已经都是0了
xhtml1.0、html4.01没有你说的问题
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
html5的doctype才会有这个问题
<!DOCTYPE html>
.sonh{
font-size: 15px;
display: inline-block;
position: relative;
}
或者把font-size:40px给li下面的a标签，不要直接给.li1
至于原因，主要是字体对行高的影响，
我的理解是 .li1的fz是40px, .sonc继承.li1的fz，
所以相对于父元素可以看成是inline元素的.sonh，它的行高自然受.sonc影响，
如果去掉.sonh的display:inline-block，
那么它作为block元素，在自定义了fz的情况下，行高就由自己决定。
以前确实没太注意html5在这里作了改变
position: relative;
是指元素 相对于未设置position:relative;状态下的位移;
以content的左上角为坐标原点，
黄色块在未position时，它的左上角相对于原点的坐标是(0,30) (你可以把两个色块的position:relative去掉看看);
所以黄色在设置了position后，它的实际坐标就是（270，30）;
position: relative;
是指元素 相对于未设置position:relative;状态下的位移;
以content的左上角为坐标原点，
黄色块在未position时，它的左上角相对于原点的坐标是(0,30) (你可以把两个色块的position:relative去掉看看);
所以黄色在设置了position后，它的实际坐标就是（270，30）;
那黄色块的基准为什么是（0，30）
页面元素在未设置position:relative;前，它所占有的页面区域在那儿，在设置了position:relative;后，那个位置还是它的;
你可以把两个色块的position:relative去掉看看
页面元素在未设置position:relative;前，它所占有的页面区域在那儿，在设置了position:relative;后，那个位置还是它的;
你可以把两个色块的position:relative去掉看看
我刚才想通了 ，relitive属性元素坐标相对于的是它最原始的位置，不是父辈元素，也就是说黄色块要定位在左上角，t偏移就要设置成（0，-30），是这样吧？ 能不能在问下，有什么属性是让盒子里的元素是相对盒子的起点做偏移的？
position:absolute;啊
我学傻了，一直以为absolute是脱离盒子，全局定位。relitive基于非static的父级元素，弄反了。谢大神搞清楚了
position:absolute;啊
我学傻了，一直以为absolute是脱离盒子，全局定位。relitive基于非static的父级元素，弄反了。谢大神搞清楚了
Hot AI Tools
Undresser.AI Undress
AI-powered app for creating realistic nude photos
AI Clothes Remover
Online AI tool for removing clothes from photos.
Undress AI Tool
Undress images for free
Clothoff.io
AI clothes remover
Video Face Swap
Swap faces in any video effortlessly with our completely free AI face swap tool!
Hot Article
Hot Tools
Notepad++7.3.1
Easy-to-use and free code editor
SublimeText3 Chinese version
Chinese version, very easy to use
Zend Studio 13.0.1
Powerful PHP integrated development environment
Dreamweaver CS6
Visual web development tools
SublimeText3 Mac version
God-level code editing software (SublimeText3)
Hot Topics
1386
52
Is HTML easy to learn for beginners?
Apr 07, 2025 am 12:11 AM
HTML is suitable for beginners because it is simple and easy to learn and can quickly see results. 1) The learning curve of HTML is smooth and easy to get started. 2) Just master the basic tags to start creating web pages. 3) High flexibility and can be used in combination with CSS and JavaScript. 4) Rich learning resources and modern tools support the learning process.
What is the purpose of the <progress> element?
Mar 21, 2025 pm 12:34 PM
The article discusses the HTML <progress> element, its purpose, styling, and differences from the <meter> element. The main focus is on using <progress> for task completion and <meter> for stati
What is the viewport meta tag? Why is it important for responsive design?
Mar 20, 2025 pm 05:56 PM
The article discusses the viewport meta tag, essential for responsive web design on mobile devices. It explains how proper use ensures optimal content scaling and user interaction, while misuse can lead to design and accessibility issues.
The Roles of HTML, CSS, and JavaScript: Core Responsibilities
Apr 08, 2025 pm 07:05 PM
HTML defines the web structure, CSS is responsible for style and layout, and JavaScript gives dynamic interaction. The three perform their duties in web development and jointly build a colorful website.
What is the purpose of the <datalist> element?
Mar 21, 2025 pm 12:33 PM
The article discusses the HTML <datalist> element, which enhances forms by providing autocomplete suggestions, improving user experience and reducing errors.Character count: 159
What is the purpose of the <iframe> tag? What are the security considerations when using it?
Mar 20, 2025 pm 06:05 PM
The article discusses the <iframe> tag's purpose in embedding external content into webpages, its common uses, security risks, and alternatives like object tags and APIs.
What is the purpose of the <meter> element?
Mar 21, 2025 pm 12:35 PM
The article discusses the HTML <meter> element, used for displaying scalar or fractional values within a range, and its common applications in web development. It differentiates <meter> from <progress> and ex
Understanding HTML, CSS, and JavaScript: A Beginner's Guide
Apr 12, 2025 am 12:02 AM
WebdevelopmentreliesonHTML,CSS,andJavaScript:1)HTMLstructurescontent,2)CSSstylesit,and3)JavaScriptaddsinteractivity,formingthebasisofmodernwebexperiences.
