HTML and CSS Reference
In-Depth Information
audio {
width: 200px;
height: 200px;
outline: 1px solid #ccc;
}
The outline shows the extent of the element.
As you can see, the width is applied to the
controls but the height is ignored. The next
example makes that clearer:
audio {
width: 100px;
height: 50px;
outline: 1px solid #ccc;
}
The controls have a minimum intrinsic width. If you try to make them
smaller than that, the width will be ignored, as you can see from the
still-visible outline in this example:
audio {
width: 50px;
height: 25px;
outline: 1px solid #ccc;
}
Other browsers display slightly differently, as you can see in the next
examples. Chrome (left) behaves similarly to Firefox: the controls
extend out of the defined width and height. But Opera (right) is a little
cleaner-looking at narrow width.
