マージンとのdiv

Question

の過度の使用など中心のdivを使用して、私はこれまでかなり新しいですし、私は自分自身が、代わりに、パディングを使用して内部の内容のために描かれたマージンとしてこのようなものdivを使用して見つける：

<div class="container" style="width:100%; height:500px; positon:relative;"> 
 
    <div class="subcontainer" style="width:25%; height:100%; position:relative; float:left;"> 
 
\t  <div class="subcontainer" style="width:100%; height:40%; position:relative; overflow:visible;"> 
 
\t \t  <img src="" style="width:200px; height:200px; position:absolute; top:50%; left:50%; transform:translate(-50%, -50%);"> 
 
\t \t </div> 
 
\t \t <div class="subcontainer" style="width:100%; height:60%; position:relative;"> 
 
\t \t  <div class="marcontainer" style="position:absolute; width:80%; height:80%; top:50%; left:10%; transform:translateY(-50%); text-align:left;"> 
 
\t \t \t  <h5>Build a website</h5> 
 
\t \t \t \t <h6>You'll learn the basics to building a website with an introduction to text editors, basic HTML tags, and advanced HTML skills.</h6> 
 
\t \t \t \t <a href="#"><h6>Leer más</h6></a> 
 
\t \t \t  
 
\t \t \t </div> 
 
\t \t </div> 
 
\t </div> 
 
\t <div class="subcontainer" style="width:25%; height:100%; position:relative; float:left;"> 
 
\t  <div class="subcontainer" style="width:100%; height:40%; position:relative; overflow:visible;"> 
 
\t \t  <img src="" style="width:200px; height:200px; position:absolute; top:50%; left:50%; transform:translate(-50%, -50%);"> 
 
\t \t </div> 
 
\t \t <div class="subcontainer" style="width:100%; height:60%; position:relative;"> 
 
\t \t  <div class="marcontainer" style="position:absolute; width:80%; height:80%; top:50%; left:10%; transform:translateY(-50%); text-align:left;"> 
 
\t \t \t  <h5>Build a website</h5> 
 
\t \t \t \t <h6>You'll learn the basics to building a website with an introduction to text editors, basic HTML tags, and advanced HTML skills.</h6> 
 
\t \t \t \t <a href="#"><h6>Leer más</h6></a> 
 
\t \t \t  
 
\t \t \t </div> 
 
\t \t </div> 
 
\t </div> 
 
\t <div class="subcontainer" style="width:25%; height:100%; position:relative; float:left;"> 
 
\t  <div class="subcontainer" style="width:100%; height:40%; position:relative; overflow:visible;"> 
 
\t \t  <img src="" style="width:200px; height:200px; position:absolute; top:50%; left:50%; transform:translate(-50%, -50%);"> 
 
\t \t </div> 
 
\t \t <div class="subcontainer" style="width:100%; height:60%; position:relative;"> 
 
\t \t  <div class="marcontainer" style="position:absolute; width:80%; height:80%; top:50%; left:10%; transform:translateY(-50%); text-align:left;"> 
 
\t \t \t  <h5>Build a website</h5> 
 
\t \t \t \t <h6>You'll learn the basics to building a website with an introduction to text editors, basic HTML tags, and advanced HTML skills.</h6> 
 
\t \t \t \t <a href="#"><h6>Leer más</h6></a> 
 
\t \t \t  
 
\t \t \t </div> 
 
\t \t </div> 
 
\t </div> 
 
\t <div class="subcontainer" style="width:25%; height:100%; position:relative; float:left;"> 
 
\t  <div class="subcontainer" style="width:100%; height:40%; position:relative; overflow:visible;"> 
 
\t \t  <img src="" style="width:200px; height:200px; position:absolute; top:50%; left:50%; transform:translate(-50%, -50%);"> 
 
\t \t </div> 
 
\t \t <div class="subcontainer" style="width:100%; height:60%; position:relative;"> 
 
\t \t  <div class="marcontainer" style="position:absolute; width:80%; height:80%; top:50%; left:10%; transform:translateY(-50%); text-align:left;"> 
 
\t \t \t  <h5>Build a website</h5> 
 
\t \t \t \t <h6>You'll learn the basics to building a website with an introduction to text editors, basic HTML tags, and advanced HTML skills.</h6> 
 
\t \t \t \t <a href="#"><h6>Leer más</h6></a> 
 
\t \t \t  
 
\t \t \t </div> 
 
\t \t </div> 
 
\t </div> 
 
</div>

を

これは良い方法ですか？それは私が作りたいページのレイアウトを視覚化するのに役立ちますが、不必要に乱雑になっているかどうかはわかりません。私にとっては理解するのは大丈夫です。

Answer 1

IMOではなく、良い練習

• コード長が増加するため
• 可読性は、インラインスタイリングの
• 使用も良いオプションではありません減少しています。

あなたのページデザインに合ったdivだけを使用してください。

例えば、ブログ投稿用のdivヘッダー/フッター/メインコンテンツエリア用とブログ投稿用のそれぞれ1つのクラスでのスタイリング