html - How can border is bigger than div itself? -
class="snippet-code-js lang-js prettyprint-override"> class="snippet-code-html lang-html prettyprint-override"><head> <meta charset="utf-8"> <title>document</title> <style> #tri{ width:0px; height:0px; border-top: 50px solid yellow; border-right:50px solid red; border-bottom:50px solid green; border-left:50px solid blue; } </style> </head> <body> <div id="tri"></div> </body>
this code draw 4 triangles, can't in code, div's width 0px border 50px, how can be?
because width , height style controls inner width , height of html element. while border weight controls outer part of html element.
this 1 interprets there no space content
#tri{ width:0px; height:0px; border-top: 50px solid yellow; border-right:50px solid red; border-bottom:50px solid green; border-left:50px solid blue; } while 1 interprets there space in content why stretches since div element occupies available width available.
#tri{ border-top: 50px solid yellow; border-right:50px solid red; border-bottom:50px solid green; border-left:50px solid blue; } reffering css box model.
margin applied first, distance element other objects in html document. border applied in based on illustration of 4 colored triangles borders displayed. padding applied distance content border , lastly element content in set it's style width:0px , height:0px applied within border.
html css
No comments:
Post a Comment