How many pixels in a <br />?

HTML & CSS
1

How many pixels does a break add? Also, how do you figure out how many pixels are in a percentage value if your mixing relative and absolute positioning?

2

As for the first question: The line-break depends on the line-height specified in the HTML/BODY tags, if one isn’t specified then the browser will likely use their own, which I’m not so certain about. However, if you specify a line-height of 20px then the line-break should be 20px. You could probably use JavaScript to determine the default line-height, but I’m not very good at JavaScript and I know that JavaScript isn’t very reliable. You could also find out the default line-height by using a paint program’s selection tool (specify a bg color for things above and below the line break and select the uncolored area, copy it, then try to create a new image and it should tell the height and width of the copied area).

3

I don’t think you can figure out how many pixels are in a % value as a percentage value is, well, a percentage of something else and thus it’s not always the same.

4

The JavaScript code is javascript:alert(document.getElementById(‘[Element ID to View]’).style.lineHeight); But you cannot view the specs of a CSS property unless it has been set. You would have to declare it first to view it, which is not very helpful. I disagree, the JavaScript is always reliable, just buggy when due to developer mistypes. I would like to know the default linehieght for IE and FF.

5

Actually you can view computed styles with el.currentStyle or getComputedStyle and getPropertyValue for modern browsers.

The actual visual height of the <br> will vary depending on font-size and line-height set, but a simple test can be done like so:

<!doctype html>
<html>
<head><style>
body { font-size:3em; }
p { background:red; }
</style></head>
<body>
<p>foo</p>
<br id="foo">
<p>bazz</p>
<script>
(function() {
var br = document.getElementById('foo');
alert(br.scrollHeight);
if ( br.currentStyle ) {
    alert(br.currentStyle['lineHeight']);
} else {
    alert(document.defaultView.getComputedStyle(br,null).getPropertyValue('line-height'));
}
})();
</script>
</body>
</html>

If you assign a line-height to the <br> other than normal you might have to use offsetTop and the element coming afterwards, or a manual calculation using Photoshop as IE doesnt take line-height into account for a <br> elements scrollHeight, and it has no clientHeight/offsetHeight much like Firefox does.

6

I stand corrected, nice coding =)

7