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?
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;
}
如果您想使用内联,请像这样使用
<div style="border:4px double black;width:200px;height:200px;"></div>
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/>
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.