Just learning web, under small white would like to ask about the web positioning style-CodePudding

Interface is arguably a run out should be with white border between circle (image), but why it does not, where is write wrong or write less what

The enclosed code:

<meta charset="utf-8" & gt;
Floating positioning & lt;/title> <br/><style> <br/>* {<br/>Default style reset/* */<br/>padding: 0; <br/>margin: 0; <br/>} <br/><br/>Body {<br/>font-size: 14px; <br/>} <br/><br/># container {<br/>margin: 0 auto; Centered/* */<br/>Width: 1000 px; <br/>height: 500px; <br/>/* background - color: # 6 cf; */<br/>} <br/><br/># header {<br/>height: 100px; <br/>Background - color: # 6 cf; <br/>Margin - bottom: 5 px;/* with below there is a gap between the main part of the integral */<br/>} <br/><br/># main {<br/>height: 500px; <br/>Background - color: # CFF; <br/>Margin - bottom: 5 px; <br/>} <br/><br/># value {<br/>float: left; <br/>width: 300px; <br/>height: 500px; <br/>Background - color: # 6 cf; <br/>} <br/><br/># content {<br/>float: right;/* left line but also in the middle of the gap, can also be the margin value - right: 5 px is void */<br/>Width: 695 px; <br/>height: 500px; <br/>Background - color: # CFF; <br/>} <br/><br/># foot {<br/>Height: 60 px; <br/>Background - color: # 6 cf; <br/>} <br/></style> <br/></head> <br/><body> <br/><Div id="container" & gt; <br/><Div id="header" & gt; </div> <br/><Div id="main" & gt; <br/><Div id="value" & gt; </div> <br/><Div id="content" & gt; </div> <br/></div> <br/><Div id="foot" & gt; </div> <br/></div> <br/></body> <br/></html> <br/><br/><img SRC="https://img.codepudding.com/202011/171133280150592.jpg" Alt=""/><p class="article - content rp"> CodePudding user response: </p># main {<br/>height: 500px; <br/>Background - color: # CFF; <br/>Margin - bottom: 5 px; <br/>} <br/><br/>You here to # main fu the background color, the place you circle there is a gap, just don't see color <br/><br/>You can learn how to check the HTML element with f12, this method is easy to find the question<p class="article - content rp"> CodePudding user response: </p># main background color remove <br/>Then in the <br/># content {<br/>float: right; <br/>box-sizing: border-box; <br/>Padding - left: 20 px; <br/>Width: 695 px; <br/>height: 500px; <br/>Background - color: # CFF; <br/>} </div> <div class="th_page th_page_color"></div> <div class="umCopyright"> <p>Page link：<a href="/frontend/88844.html" target="_blank" style="color:#999">https//www.codepudding.com/frontend/88844.html</a></p> </div> <div class="detail-arr"> <div class="detail-arr-left">Prev:<a href='/frontend/88843.html'>Self-study Vue 17 days, knowledge summary on the first day</a></div> <div class="detail-arr-right">Next:<a href='/frontend/88845.html'>The inside of the box element floating and box margin - top negative problems</a></div> </div> </div> </div> </div> </div> <div class="container th_top"> <div class="row"> <div class="col-md-12"> <div class="hot-tags neitags"> <ul> <li><i class="iconfont icon-x-tags"></i> Tags： </li> <a href='/e/tags/?tagname=HTML+%28CSS%29' target='_blank'>HTML (CSS)</a> </ul> </div> </div> </div> </div> <div class="container th_top"> <div class="row"> <div class="col-md-12"> <div class="xiangguan"> <ul class="msg msghead"> <li class="tbname">Related</li> </ul> <ul> </ul> </div> </div> </div> </div> <div class="container th_top"> <div class="row"> <div class="col-md-12"> <div class="flinks"> <ul> <li><i class="iconfont icon-x-tags"></i> Links： </li> <li class="liflinks"><a target="_blank" href="/" title="CodePudding">CodePudding</a></li> </ul> </div> </div> </div> </div> <div class="footer"> <p><span style="font-size:16px;color:#666;font-weight: bold">About Us:</span> <a href="https://www.codepudding.com/contact.html">Contact Us</a> <a href="https://www.codepudding.com/service.html">Terms of Service</a> <a href="https://www.codepudding.com/privacy.html"> Privacy Policy</a></p> <p class="foot_info">Copyright © 2010-2023，Powered By <a href="/" target="_blank">CodePudding</a> </p> </div> <script type="text/javascript" src="/skin/code/tianhu.js"></script> </body></html>