开发者

Refactor HTML with CSS

开发者 https://www.devze.com 2023-01-03 09:58 出处:网络
As my CSS and HTML skills are somewhat limited can anyone advise if the code below can be refactored without so many div tags?

As my CSS and HTML skills are somewhat limited can anyone advise if the code below can be refactored without so many div tags?

<div style="border: 1px solid #D0D2D1">
    <div style开发者_开发问答="border: 8px solid #F6F4F5">
        <div style="padding: 0.5em">
            Content Here
        </div>
    </div>
</div>


<div style="border: 1px solid #D0D2D1">
    <div style="border: 8px solid #F6F4F5; padding: 0.5em">
        Content Here
    </div>
</div>

Should work the same.


You could lose at least one by combining the padding from the inner div with the middle one:

<div style="border: 1px solid #D0D2D1">
    <div style="border: 8px solid #F6F4F5; padding: 0.5em;">
        Content Here
    </div>
</div>

Unfortunately if you want two different border colours, you're going to be stuck with at least 2 of the divs


Here's a different approach (as Matt said, it's impossible to go below 2 DIVs if you want different border colors) :

<div style="border:1px solid #D0D2D1; background-color:#F6F4F5; padding:8px">
    <div style="background:white; padding:.5em">
    Content here
    </div>
</div>
0

精彩评论

暂无评论...
验证码 换一张
取 消