JSFiddle - React, Tailwind, and code Playground

by yyj1017

HTML

<!DOCtype html>
<html>
<body>

<h1 class="heading">化妝品廣告刊登前要先審查嗎？大法官曾判定違憲　食藥署要修法</h1>
<p class="author"><a class="a1"  href="https://www.storm.mg/authors/975/%E5%91%A8%E6%80%A1%E5%AD%9C">
周怡孜
</a> <span class="date">2019-01-09 08:10 </span><span class=pv>1172人氣</span>
</p>
<img class="p1" src="https://image.cache.storm.mg/styles/smg-800x533-fp/s3/media/image/2019/01/06/20190106-114245_U12418_M489931_d3d0.jpg?itok=S3iYu0Lg" width=627 height=427>
<p class="ex1">為規範化妝品廣告不得誇大不實及涉醫療效能，衛生福利部食品藥物管理署近日擬訂標示宣傳管理原則，限制品名及標示的字詞使用，但未料卻與《商標法》發生衝突。示意圖，與本文個案無關。（取自pompi@pixabay/CC0）</p>
<div>
<p class="ex2">為規範化妝品廣告不得誇大不實及涉醫療效能，衛生福利部食品藥物管理署近日擬訂標示宣傳管理原則，限制品名及標示的字詞使用，但未料卻與《商標法》發生衝突。事實上，過去大法官在相關釋憲案中，<a class=a2 href="https://www.storm.mg/article/209946">曾針對事前審查廣告言論，做出違憲判定</a>。</p>
<p class="ex3">
立法院去年5月修正通過《化粧品衛生安全管理法》，原是一項立意良善的修法，但食藥署進一步規劃「化妝品品名、標示、宣傳涉及『藥』之管理原則規劃」草案時，則認定「藥用」、「藥皂」、「藥劑」、「藥水」、「藥粧（妝）」等字詞涉及醫療效宣傳，不得出現在品名及標示中，引起化妝品牌業者擔憂，恐怕被迫改名。
</p>
<h2>
DHC廣告挨罰　大法官：審查規定違反「言論自由」</h2>
<p class="ex4">
這項修法，源自於台灣蝶翠詩化妝品（DHC）的釋憲案。DHC因在購物平台上刊登「淨白防曬乳」廣告，內容提及能預防陽光傷害肌膚、淡化暗沉等字句，遭台北市政府衛生局以未在事前將所有文字、畫面或言詞，申請核准刊登廣告，違反當時《化粧品衛生管理條例》第24條第2項規定，處以3萬元罰緩。</p>
<p class="ex5">大法官在2017年做出第744號解釋，認定化妝品廣告在播出前，要事先審查的規定違憲。時任大法官會議秘書處長王碧芳表示，廢除化妝品廣告事前審查的制度，是為保障言論自由不應受審查限制，若業者的廣告有違法情形，「事後追懲」同樣能達到目的。</p>
<p class="ex6">當時，大法官在理由書也指出，化妝品廣告利用傳播方法宣傳效能，以達到銷售目的，具商業上意見表達性質，內容若是以合法交易為目的，未有非虛偽不實、有誤導作用，則有助於消費大眾作出經濟上的合理抉擇，應受到憲法言論自由保障。</p>
<img class="p2" src="https://image.cache.storm.mg/styles/smg-800x533-fp/s3/media/image/2018/08/07/20180807-051256_U1004_M440033_2a14.jpg?itok=CVUp-5do" width=581 height=387>
<p class="ex7">
《化粧品衛生安全管理法》修法源自於台灣蝶翠詩化妝品（DHC）的釋憲案。（示意圖，取自DHC臉書）
</p>
<p class="ex8">
不過，對於認定相關字眼有無涉及誇大不實或宣傳醫療效能，是否違反《憲法》言論自由精神，由於當時《化粧品衛生管理條例》未有不得宣傳醫療效能等規定，大法官因而未進一步做出解釋。<br></p>
<p class="ex9">
但此次修法後，食藥署擬訂的宣傳管理原則，欲限制品名及標示字詞，是否有審查廣告言論的疑慮，以及恐怕與《商標法》抵觸，未來要如何調整與面對，勢必成為行政單位的燙手山芋。
</p>
</div>
</body>
</html>

CSS

body {font-family: "Microsoft JhengHei";
background-color:#F3F4F5; 
}
h1.heading {
color:#464343;
font-weight: 800;
background-color:#F3F4F5;
padding:0 20px;
}
p.author {
background-color:#F3F4F5;
padding:0 20px
}
a.a1{text-decoration:none; color:#E35133; font-weight:600}
span.date{color:black}
span.pv{color:grey}
img.p1{padding:10px 20px 0; margin:0}
p.ex1 {color:grey; font-size:17px; background-color:#F3F4F5; padding:0 20px; line-height:1.4}
div {background-color:#FFFFFF;font-size:20px; font-weight:530; line-height:1.6 ;letter-spacing:1px}
p.ex2::first-letter {font-size:34px; border-bottom: 5px solid red; vertical-align: sub}
p.ex2 {padding:30px 50px; margin:0; 
} 
a.a2{color:red}
p.ex3 {padding:0 50px 40px; margin:0
}
h2{font-size:21px; color:red; padding:20px 50px;
}
p.ex4 {padding:0 50px 30px; margin:0
}
p.ex5 {padding:0 50px 30px; margin:0
}
p.ex6 {padding:0 50px 30px; margin:0
}
img.p2 {margin:0 0 5px 0; padding:0 50px 0px}
p.ex7 {color:grey; font-size:17px; padding:0 50px; line-height:1.4}
p.ex8 {padding:30px 50px; margin:0
}
p.ex9 {padding:0 50px 30px;margin:0
}