CODEWITHSUNDEEP
htmlcss
Ave Maleficum
Ave Maleficum

Reputation: 117

How can border is bigger than div itself?

       
<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 is the code to draw four triangles, what I can't get it is that in this code, div's width is 0px but its border is 50px, how can it be?

Upvotes: 1

Views: 3641

Answers (4)

Ian Hazzard
Ian Hazzard

Reputation: 7771

Good question. Here's an illustration of the CSS box model:

css-box-model
(source: w3schools.com)

If you leave your content (meaning height and width) to 0, your border can still exist. Learn more about the CSS box model at W3Schools.com.

Upvotes: 2

Bj&#246;rn Tantau
Bj&#246;rn Tantau

Reputation: 1614

You can manipulate the box-model by specifying box-sizing.

box-sizing: border-box;

should achieve the effect you want. It is also how Internet Explorer (used to?) apply the box-model.

Upvotes: 0

Mike Ante
Mike Ante

Reputation: 756

Because the width and height style only controls the inner width and height of the html element. While the border weight controls the outer part of the HTML element.

This one interprets that there is no space for the 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 this one interprets that there is space in the content that is why it stretches since the div element occupies the 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 to the css box model.

Margin is applied first, to distance the element to the other objects in the html document. Border is then applied in which based on the example of the 4 colored triangles which are borders is displayed. Padding would then be applied to distance the content from the border and lastly the element content in which you set the it's style to width:0px and height:0px is only applied inside the border.

Upvotes: 1

cport1
cport1

Reputation: 1185

The "box model" in CSS is actually:

width + padding + border = actual width of box

height + padding + border = actual height of box

https://developer.mozilla.org/en-US/docs/Web/CSS/box_model

Upvotes: 1

Related Questions