CSS中的div标签和div周围的内嵌边框问题

Question

This is my first time using HTML with CSS inline style. Basically I am trying to use a div tag with an inline style to cause it to have a double lined border and one half of a letter width padding offsetting the text.

I thought maybe I should start the div tag using an inline style rule, and a double border. For example:

<div>
<div style=border:double;padding:0em,3px></div>

Is that a correct approach?

Answer 1

You can use <hr> to create a horizontal rule and style it to make it double lined.

hr {
    padding: 0em 3px;
    border: none;
    border-top: double #000;
    color: #000;
}

Answer 2

如果您想使用内联，请像这样使用

<div style="border:4px double black;width:200px;height:200px;"></div>

Answer 3

First of all, you should always put quotes around attribute values. There is no reason not to. (Originally, quotes were meant to be omittable around simple values, for instance height=30 , never around phrases that contained colons and semicolons and greater-than signs and stuff...)

Also, you have an error in the paddings: those are not separated by commas.

Then if you use the border notation, which is a shorthand for border-width , border-style and border-color , the browser will choose default values for the properties you don't specify. In this case, medium for the border-width and currentColor for the border-color . If that is what you had planned, OK. But if you don't know beforehand how thick a medium border is exactly, you should provide a width yourself.
See MDN .

For double borders, multiples of 3px work best, since that's what you need minimally (1 px for each of the lines and 1 px in between). With other widths, different browsers may divide the widths differently, so that you may get thicker lines and less space in between on some browsers than on others.

Edit:
WRT the comment, if you want the div to take up the right half of the window, you can do something like this. Using a left margin of auto and a right margin of 0 , the div will be flushed to the right.
Note that I also used a padding of .5ch for "one half of a letter width", which is better than 3px hardcoded.

 .styled { border:3px double; width:50%; padding:.5ch 0; margin:0 0 1em auto; } 

 <div class="styled"></div> <hr/> 

Or, if using a float is more desirable:

 .styled { border:3px double; width:50%; float:right; padding:.5ch 0; margin-bottom:1em; } .styled + * { clear:right; } 

 <div class="styled"></div> <hr/>