How many pixels in a <br />?

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?

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).

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.

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.

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>
body { font-size:3em; }
p { background:red; }
<br id="foo">
(function() {
var br = document.getElementById('foo');
if ( br.currentStyle ) {
} else {

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.

I stand corrected, nice coding =)